YES, every swatch produced by the Color Palette Generator is delivered in HEX, RGB, and HSL, the three formats CSS and mainstream design tools read natively. HEX is what most web code uses because hex codes are short and copy-paste friendly. RGB is the channel-level format that mirrors how screens actually produce color, so design apps like Figma, Sketch, Adobe XD, and Illustrator accept RGB values without translation. HSL is the format that maps directly to how the color wheel works: hue as an angle from 0° to 360°, saturation as the intensity of that hue, and lightness as a 0–100% scale from black to white. Because the generator computes its schemes in HSL, the relationships it returns, including complementary, analogous, and triadic, are expressed in the very format you can use to fine-tune the palette later. With all three formats shown under each swatch, nothing has to be converted by hand; the generator hands you a palette and the code-ready values in the same click.
That built-in format support is the whole reason the Color Palette Generator is usable in both CSS and design tools at the same time. The rest of this article walks through what each format is for, exactly how to paste the values into a stylesheet, how to drop them into a design file, and the accessibility check that should come last.
What Color Formats the Palette Generator Outputs
The generator returns every swatch in three formats at once. Each has a different role, and choosing which to paste depends on whether you are working in code, in a vector tool, or in a style guide document. The table below shows the three formats produced from the example base color #3b82f6.
| Format | Example (from base #3b82f6) | Best used in |
|---|---|---|
| HEX | #3b82f6 | CSS color properties, HTML inline styles, color pickers in Figma and Sketch, brand style guides |
| RGB | rgb(59, 130, 246) | CSS rgb() functions, color-mix(), any tool that wants channel-level numbers (Photoshop, Illustrator) |
| HSL | hsl(217, 91%, 60%) | CSS custom properties you want to vary, programmatic tints and shades, light/dark theme switches |
All three describe the same color, so you can switch formats without changing what shows on screen. The HEX value is the one most people paste first because it is the shortest. The RGB channels are useful when a tool asks for numeric input, including a Photoshop eyedropper readout, a CSS rgb() function, or a data-viz library that takes channel arrays. HSL is the format that lets you edit a palette by changing only one number, the hue, without disturbing how light or saturated the color feels.
Using Palette Colors in CSS
The fastest path from a generated palette to a live stylesheet is to define the swatches as CSS custom properties, then reference them anywhere a color, background-color, or border-color value is needed. The generator's HEX output drops straight into a :root block, and you can keep the file readable by naming each variable after its role rather than after the hex value.
- Open the Color Palette Generator and choose your base color with the picker, or type a HEX value such as #3b82f6.
- Pick a scheme. Start with complementary if you want a strong accent color, or monochromatic if you want a tonal scale for a single brand color.
- Click each swatch you want to keep. The HEX value copies to your clipboard automatically.
- Paste the HEX values into a :root block in your CSS, one per custom property, with semantic names like --color-brand, --color-accent, and --color-surface.
- Reference those variables in your styles with color: var(--color-brand);, background: var(--color-surface);, or any other property that takes a color.
Once the variables are defined, you can swap the entire palette by editing one block, with no need to chase hex codes through individual selectors. If you ever want a lighter or darker version of a swatch, swap that one property from HEX to HSL and use the hsl() function with a different lightness value. Every browser that supports CSS custom properties also supports hsl(), so the swap is safe for any modern site.
Using Palette Colors in Figma, Sketch, and Adobe XD
Design tools treat the generator's output as a native input: HEX strings paste into any color picker, and RGB channels work for tools that prefer numeric input. The workflow is the same regardless of which app you use, and the only real choice is whether to paste a HEX string or to enter the three RGB numbers by hand.
- Generate the palette in the Color Palette Generator and copy the HEX of the swatch you need.
- In Figma, open the color picker for a frame, fill, or stroke and paste the HEX into the hex field at the top of the picker, the field that accepts a #RRGGBB string. Press Enter to apply.
- In Sketch, paste the HEX into the Fill or Border color well. Sketch recognizes pasted hex strings on input and commits the value.
- In Adobe XD, click the color picker for a fill or stroke and paste the HEX into the input. XD normalizes the value to RGB internally and updates the swatch.
- Repeat for each swatch in the palette. Save the colors as styles, components, or variables so the rest of the file references them by name.
If you copy a swatch in RGB form instead, Photoshop and Illustrator also accept pasted rgb(r, g, b) values in their color pickers. Either route works; HEX is usually faster because it is one short string rather than three comma-separated numbers.
Why HSL Helps When You Iterate on a Palette
HSL is the format that maps to the color wheel, which is why the generator uses it for scheme math. Every scheme is a hue rotation on the 0–360° circle, computed by simple angle arithmetic with proper wrap-around so a hue of 350° plus 30° lands on 20°, not 380°.
Worked example, complementary of #3b82f6: 1. Convert the base HEX to HSL: #3b82f6 → hue ≈ 217°, saturation ≈ 91%, lightness ≈ 60%. 2. Apply the complementary rule (rotate hue by +180°): 217° + 180° = 397°. 3. Wrap the hue back into the 0–360° range: 397° − 360° = 37°. 4. Final complementary hue: 37° (an orange), at the same 91% saturation and 60% lightness. The generator performs these three steps in your browser, so the complementary swatch you click is computed from the same formula you can apply by hand.
The remaining schemes are equally mechanical. Analogous shifts ±30° around the base hue (so 217° ± 30° = 187° and 247°). Triadic steps 120° apart (217°, 337°, and 97°). Tetradic steps 90° apart (217°, 307°, 37°, and 127°). Split-complementary sits at +150° and +210° from the base. Monochromatic holds the hue fixed and steps the lightness value. Once you have any swatch's HSL readout, you can extend the palette by writing a CSS hsl() function and changing only the third value, the lightness, to produce tints and shades on demand: hsl(217 91% 60%) for the base, hsl(217 91% 70%) for a lighter tint, and hsl(217 91% 45%) for a deeper shade, all without leaving the stylesheet.
Check Contrast After You Apply the Palette
A harmonious palette is not automatically an accessible one. Complementary pairs offer high contrast on the color wheel, but high chroma on opposite hues can still fail the WCAG text/background contrast tests if both colors are bright or both are dark. Once your colors are placed into a real layout, run each text and background pair through a contrast checker. The checker reads the same HEX and RGB values you just pasted into CSS, so nothing has to be re-entered. Aim for at least a 4.5:1 ratio for body text and 3:1 for large text, both of which are the WCAG 2.2 AA thresholds; any palette that falls short should have its lightness or saturation adjusted before it ships.
For a deeper walk-through of building a website palette from a single base color, the guide on creating a website color palette from one base color continues the workflow, and the palette generator for accessibility contrast guide pairs the generator with a contrast check step by step. The color theory that the schemes are derived from, including the relationships between complementary, analogous, and triadic positions on the wheel, is covered in detail on the Wikipedia color theory page.