In the Swatches panel, select the menu icon in the upper-right corner.
- What's new
-
Get started
- Technical requirements and installation
-
Learn the basics
- Adobe Photoshop on desktop FAQ
- Home screen overview
- Workspace overview
- Access the Discover panel
- Save custom workspaces
- Switch workspaces
- Delete workspaces
- Restore workspaces
- Boost workflows with the Contextual Task Bar
- Rearrange document windows
- Hide or show all panels
- Dock or undock panels
- Move panels
- Add and remove panels
- Stack floating panels
- Expand or collapse panel icons
- Change text size in panels and tooltips
- Use simple math in number fields
- High-density monitor support and per-monitor scaling
- Arrange and group panels
- Request access to test experimental features
-
Set up toolbars and panels
- Customize toolbar
- Tooltips overview
- Create tool presets
- Use spring-loaded shortcuts
- Use Undo and Redo commands
- History panel settings
- Set History Log preferences
- View history logs
- Use snapshots in the History panel
- Paint with image states from the History panel
- Manage image states
- Restore parts of an image to a previous state
- Edit images with AI Assistant
- View and synchronize multiple images
-
Settings and preferences
- Adjust preferences
- Backup and restore preferences
- Reset preferences
- View keyboard shortcuts
- Change tool pointers
- Change Photoshop language settings
- Connect social media accounts for Content Credentials (Beta)
- Display file information in the info panel and document status bar
- Photoshop preferences locations
- Generative AI in Photoshop
-
Create, open, and import images
- Import files
-
Create images
- Generate an image with descriptive text prompts
- Edit images with Generative Fill
- Generate sharper variations with Enhance Detail
- Explore beyond the canvas with Generative Expand
- Use reference images for consistent results
- Generate images guided by a reference image
- Edit images with Prompt to edit
- Use Markup for AI image generation
- Create documents using presets
-
Create and manage layers
-
Get started with layers
- Layers overview
- Organize layers with layer groups
- Work with the Layers panel
- Video Layers overview
- Convert background and regular layers
- Duplicate layers
- Create document from layer or group
- Change transparency preferences
- Sample from all visible layers
- Rasterize layers
- Organize layers in the Layers panel
- Transform and manipulate layers
-
Color adjustment and fill layers
- Adjustment and fill layers overview
- Work with adjustment layers
- Use layer masks to target adjustment or fill layers
- Create adjustment layers
- Merging adjustment or fill layers
- Adjustment presets overview
- Create custom presets
- Correct color balance with Color and vibrance
- Create fill layers
- Adjustment layer options
- Change adjustment and fill layer options
- Adjust contrast with Clarity and Dehaze
- Adjust texture with Grain
- Adjust image lighting with Light
-
Apply layer effects
- Add layer styles
- Work with preset styles
- Layer style effects and options overview
- Manage preset styles
- Display or hide layer styles
- Copy and paste layer styles
- Import preset style libraries
- Manage contours
- Set a global lighting angle for all layers
- Scale layer effects
- Remove layer effects
- Work with layer styles
- Convert layer styles to image layers
- Create texture effects with Knockout
- Set layer opacity and blending modes
-
Smart objects
- Smart Objects - overview and benefits
- Create embedded Smart Objects
- Create linked Smart Objects
- Update Linked Smart Objects
- View Linked Smart Object properties
- Embed Linked Smart Objects
- Package and locate linked Smart Objects
- Convert embedded Smart Objects to linked
- Filter the Layers panel by Smart Objects
- Duplicate an embedded Smart Object
- Edit the contents of a Smart Object
- Replace the contents of a Smart Object
- Convert Smart Objects to layers
- Rasterize Smart Objects
- Export the contents of an embedded Smart Object
- Reset Smart Object transforms
- Create layer compositions
- Layout and design tools
-
Get started with layers
-
Crop, resize, and transform
-
Resize and adjust resolution
- Printed image resolution
- Set image size and resolution
- Resample option in the Image Size dialog
- Monitor resolution and image display size
- File size
- Printer resolution
- Resolution specs for printing images
- Preserve visual content when scaling images
- Specify content to protect when scaling
- Resize images
- Resampling options in Photoshop
- Change the pixel dimensions of images
- Change print dimensions and resolution
- Manage image file size
- Resizing parameters in Photoshop
- Change the canvas size
- Image size, resolution, and resampling
- Transform images, shapes, and paths
- Crop and straighten
- Transform, manipulate, and reshape
-
Resize and adjust resolution
-
Make selections
- Get started with selections
-
Automatic and color-based selections
- Improve Select Subject and Remove Background results
- Make precise selections using Select People
- Remove objects with Delete and Fill Selection
- Improve hair selections with the Refine Hair tool
- Mask all objects in a layer
- Detect subject using Select Subject
- Paint a selection with Quick Selection tool
- Select areas by color with the Magic Wand tool
- Freehand selections
-
Refine and modify selections
- Move a selection or selection border
- Refine your selection and mask
- Hover layer bounds in the Move tool
- Copy and paste selections
- Create multiple copies of a selection within an image
- Paste one selection into or outside another
- Delete or cut selected pixels
- Control the movement of a selection
- Hide or show selection edges
- Inverse selection
- Adjust a selection manually
- Select only an area intersected by other selections
- Refine and soften selection edges
- Select pixels using anti-aliasing
- Define a feathered edge for a selection tool
- Create a selection around a selection border
- Expand or contract a selection
- Clean up stray pixels in a color-based selection
- Fringe pixels around a selection
- Decrease the fringe on a selection
- Remove a matte from a selection
- Use selections for generative editing
- Select areas and pixels of images in focus
-
Create masks
-
Layer masks
- Add layer masks
- Create layer masks for all detected objects in a layer
- Unlink layers and masks
- Disable or enable layer masks
- Apply or delete layer masks
- Alpha channels and masks in Photoshop
- Create and manage clipping masks
- Edit and refine existing layer masks
- Mask layers with vector masks
- Position elements with snapping
- Blend images
-
Layer masks
-
Repair and retouch
-
Remove objects and fill space
- Remove background in your images
- Replace background with Generate Background
- Retouch tools overview
- Blend objects and people into any background with Harmonize
- Remove objects and fill the area with Content-Aware Fill
- Adjust Content-Aware Fill settings
- Tools to fine-tune sampling and fill areas
- Apply or cancel Content-Aware fill changes
- View full-resolution preview in the Preview panel
- Remove objects from within the Contextual Task Bar
- Remove tool known issues and workarounds
- Remove tool minimum and recommended hardware requirements
- Remove objects
- Remove wires, people, and general distractions
- Review and refine general distractions
- Fill selections with Multi-Image Content-Aware Fill
- Use the Content-Aware Patch tool
- Heal and clone
- Adjust light and tone
-
Clean and restore images
- Enhance image quality with Generative Upscale
- Define planes to adjust perspective
- Manipulate the planes to adjust perspective
- Edit different perspectives in the same image
- Keyboard shortcuts to adjust perspective
- Get started with Photomerge
- Create panoramic images with Photomerge
- Create 360-degree panoramas
- Remove imperfections with the Spot Healing Brush
- Retouch a large area with the Healing Brush tool
- Repair an area with the Patch tool
- Remove red eye in flash photos
- Define an image as a preset pattern
- Erase parts of an image with the Eraser tool
- Auto Erase with the Pencil tool
- Create smoother brush strokes using stroke smoothing
- Change pixels to transparent with the Background Eraser tool
- Remove similar pixels with the Magic Eraser tool
- Remove reflections
- Remove small spots with the Spot Healing Brush
-
Remove objects and fill space
-
Adjust color
-
Color profiles
- About color profiles
- Embed color profiles
- Change color profile for documents
- Color management in Photoshop
- Color profiles
- Work with OpenColorIO color management
- Set up color management in Photoshop
- Manage document colors for online viewing
- Add swatches from HTML CSS and SVG
- Download Adobe Color Management Module
-
Choose colors
- Set foreground and background colors
- Choose colors with the Adobe Color Picker
- Choose a color while painting
- Choose web-safe colors
- Choose a CMYK equivalent for a non-printable color
- Choose a spot color
- Spot color libraries
- Manage color profiles when opening images
- Choose colors in the Color panel
- Change the color picker
- Color modes in Photoshop
- Color profiles for imported images
- Color modes
-
Color corrections
- Apply a Hue or Saturation adjustment
- Colorize a grayscale image or create a monotone effect
- Adjust color and tone with Curves
- Adjust color saturation using a Vibrance adjustment layer
- Adjust color and tone with Levels and Curves eyedroppers
- Adjust tonal range and color balance using Levels
- Apply the Brightness/Contrast adjustment
- Apply Color Balance adjustment in Photoshop
- Color adjustment basics in Photoshop
- Use Auto Tone, Auto Contrast, and Auto Color
- Use the Histogram panel
- Adjust image color and tone
-
Selective color adjustments
- Match color in different images
- Match color between two images
- Match color of two layers in the same image
- Save and apply settings in Match Color
- Replace Object Colors by Applying a Hue or Saturation Adjustment
- Customize indexed color tables
- Make selective color adjustments
- Mix color channels with Channel Mixer
- Color effects and techniques
- HDR and channel manipulation
-
Color profiles
-
Apply painting techniques
- Fill objects, selections, and layers
- Create and fill with patterns
-
Brushes and presets
- Get started with brush presets
- Display the Brush Settings panel and brush options
- Create a brush tip from an image
- Create a brush and set painting options
- Select a preset brush
- Create a new preset brush
- Create preset brush groups
- Rename preset brushes
- Delete preset brushes
- Import brushes and brush packs
-
Draw shapes and paths
- Create shapes
- Draw lines and curves
-
Text and typography
- Get started with text
- Select and manage fonts
- Type layers and creation
- Text on paths and shapes
- Characters and glyphs
- International text and languages
- Work with Dynamic Text
-
Effects and filters
- Get started with filters
- Smart filters
- Blur and sharpen filters
-
Artistic and stylize filters
- Reshape and distort images with Transform Warp
- Warp a Layer with Cylindrical Transform
- Get precise distortions with Split Warp
- Distort specific image areas with Puppet Warp
- Overview of Liquify filter
- Overview of distortion tools
- Use Liquify to distort an image
- Freeze or thaw areas
- Work with meshes
- Work with backdrops
- Reconstruct distortions
- Replace the sky in images
- Select and manage sky presets
- Enhance images with generative AI filters
- Apply texture and surface effects to filters
- Correct lens distortion and perspective
- Neural filters
-
Use grids and measurement guides
- Alignment grids and guides
-
Measure and scale
- Manage measurement scales
- Manage scale markers
- Use the measurement log for performing measurements
- Measurement data points overview
- Create, edit, and delete data point presets
- Manage measurement logs
- About the measurement scale and scale markers
- Use rulers in Photoshop
- Measure and position with the Ruler tool
-
Add video and animation
-
Create animation frames
- Create frame-based animations
- Add frames to animations
- Select animation frames
- Edit animation frames
- Unify layer properties in animation frames
- Copy frames with layer properties
- Create frames using tweening
- Manage layer visibility in animation frames
- Specify a delay time in frame animations
- Choose a frame disposal method
- Specify looping in frame animations
- Delete animations
- Use keyframes
-
Create animation frames
-
Automate tasks
- Create and record actions
- Process a batch of files
- Automation settings and presets
-
Save and export
- Save files
-
Export files to different formats
- Video and animation export formats
- Enhance animation frames
- Flatten frames into layers
- Export video files or image sequences
- Photoshop file formats overview
- File compression in Photoshop
- Supported file formats in Photoshop
- Image file formats supported in Photoshop
- Export your work using the Quick Export as option
- Fine-tune export settings with Export As
- Export settings and export location preferences
- Export files in different sizes
- Export layers as files
- Export artboards as PDF
- Export artboards as files
- Save and export to cloud
- Metadata, CSS, and content credentials
-
Share and collaborate
- Collaborate and edit
- App integrations
-
Troubleshoot
- Tools and resources
- Performance and stability issues
- File and format issues
- Tool and feature issues
Add swatches from HTML CSS and SVG
Last updated on
Sep 30, 2026
Import web color values from code files directly into your Swatches panel.
Use this method when working with web design assets or translating website color schemes into your Photoshop projects. This feature extracts all unique color values from HTML, CSS, or SVG documents and adds them to your Swatches panel. Duplicate color values are automatically filtered out, keeping your panel organized with only unique colors.
Photoshop recognizes standard web color formats including hexadecimal codes (#112233, #123), RGB values (rgb(1,2,3)), RGBA values with transparency (rgba(1,2,3,4)), HSB values (hsb(1,2,3)), and HSBA values (hsba(1,2,3,4)).
You can either add imported colors to your existing swatches or replace your current swatch collection entirely. Once imported, colors are converted to Photoshop's color system.
Import colors from web documents
Select Load Swatches to add colors to your existing swatches, or select Replace Swatches to replace all current swatches with the imported colors.
In the file browser, navigate to your HTML, CSS, or SVG file and select it.
Select Load to complete the import.
The imported colors now appear in your Swatches panel and are ready to use across your project. All recognized color formats from the source file are automatically converted to Photoshop's color model.
Note
To maintain consistent colors across web and print projects, import swatches from your website's CSS file at the start of each design project. This ensures your Photoshop designs match your established brand colors exactly.
Create stunning images with Photoshop
Edit, retouch, and transform photos with the industry-leading creative tools you know and love.
