Convert Design Mockup Colors to CSS Variables

The designer sends you a Figma screenshot, a Photoshop mockup, or a PDF of the approved design. “Match these colors exactly,” they say. You squint at the screen, guess a hex code, tweak it three times, and it still does not look right. There is a faster way. This two-step workflow extracts exact colors from any design image and converts them into HSL-based CSS custom properties that are easy to maintain and adjust.

Why HSL for CSS Variables?

Most designers communicate in hex (#3B82F6) and most developers write CSS in hex or RGB. But HSL (Hue, Saturation, Lightness) is the superior format for CSS custom properties because it is human-readable and composable. Need a darker shade? Lower the lightness. Need a muted version? Reduce saturation. With HSL, you can create entire color palettes from a single base value using simple math. This makes your CSS maintainable and your theming system flexible.

Step 1: Extract Colors from the Design

Take a screenshot of the design mockup (or use the image file the designer provided). Open the Color Picker from Image and load the image. Click directly on each color you need to extract: the primary brand color, secondary color, background, text color, border color, accent color, and any other distinct colors in the design.

For each click, the tool gives you the exact hex value. Build a list:

• Primary: #3B82F6 (the main blue button)
• Primary hover: #2563EB (the darker blue on hover states)
• Background: #F9FAFB (the light gray page background)
• Text: #111827 (the near-black body text)
• Text muted: #6B7280 (the gray secondary text)
• Border: #E5E7EB (the subtle gray borders)
• Accent: #10B981 (the green success color)

Step 2: Convert to HSL

Take each hex value and paste it into the Color Converter. The tool outputs the color in every format: hex, RGB, HSL, and more. Copy the HSL values. For #3B82F6, you get hsl(217, 91%, 60%). For #111827, you get hsl(221, 39%, 11%).

Step 3: Build Your CSS Custom Properties

Now create your CSS variables using the HSL values. A clean approach is to store just the H, S, L components so you can manipulate opacity and lightness independently:

:root {
  --color-primary: hsl(217, 91%, 60%);
  --color-primary-hover: hsl(217, 91%, 50%);
  --color-primary-light: hsl(217, 91%, 95%);
  --color-bg: hsl(210, 20%, 98%);
  --color-text: hsl(221, 39%, 11%);
  --color-text-muted: hsl(220, 9%, 46%);
  --color-border: hsl(220, 13%, 91%);
  --color-accent: hsl(160, 84%, 39%);
}

Notice how the hover state is the same hue and saturation as the primary, just with lower lightness. The light variant has the same hue with very high lightness. This is the power of HSL: your entire color system is derived from a few base hues, and adjustments are intuitive.

Building a Complete Palette from One Color

Once you have the primary color in HSL, you can generate an entire shade scale by adjusting lightness:

• 50 (lightest): Lightness 95–97%
• 100: Lightness 90%
• 200: Lightness 80%
• 300: Lightness 70%
• 400: Lightness 60%
• 500 (base): The extracted value
• 600: Lightness 50%
• 700: Lightness 40%
• 800: Lightness 30%
• 900 (darkest): Lightness 20%

This gives you a Tailwind-style color palette derived directly from the design mockup, with no guesswork and no expensive design tool subscription required.

Workflow Summary

1. Load the design screenshot into the Color Picker from Image. Extract all unique colors.
2. Convert each hex to HSL with the Color Converter.
3. Define CSS custom properties using the HSL values.
4. Generate shade scales by adjusting lightness values.

This workflow bridges the designer-developer gap precisely. No more “that blue is slightly off” — you are working with the exact pixel values from the approved design.