Color Studio: Color Palette Generator and Contrast Checker

Build a color palette for a website, app or design system. Start with a brand color or one of 48 palettes, explore six color harmonies on the interactive wheel, and check whether your text is readable. Convert color codes, generate shades and CSS gradients, then export or share the combination.

On this page: Build an interface palette · Color theory · Contrast · Conversions · Shades and gradients · CSS example · Sharing · Questions.

Build a useful interface palette from one color

A palette becomes useful when its colors have jobs. For a form, dashboard or landing page, start with a page background, a raised surface, readable text, a primary action and a supporting accent. These roles do not need five different hues.

1. Enter your brand color. Select a swatch and paste its HEX, RGB, HSL, Oklab or OKLCH value. Choose a harmony to explore related colors.
2. Keep the colors you need. Lock the brand swatch before editing another. Locks protect against automatic changes; you can still deliberately edit a locked color.
3. Create separation with lightness. Use Shades for a pale panel, a dark heading or a stronger button. Click a shade to copy its HEX code without changing the palette. To apply it, paste it into the color editor; other unlocked colors will follow the harmony.
4. Test the pairs that will touch. In Contrast, check body text on the page, button text on its fill, and meaningful borders or icons against their surroundings. A pass for one pair says nothing about the other pairs.
5. Export and try the actual component. Copy CSS variables, SCSS or JSON. Test long labels, error messages and keyboard focus, not just a row of swatches. The Lorem Ipsum generator helps fill a layout with realistic text lengths.

For a light theme, try a pale low-saturation background and a stronger primary action. For a dark theme, choose the surface first and retest text and accents against it; simply reversing a light palette does not establish readable pairs. Save the two themes as separate share links.

Color theory: choose a harmony for the job

Hue is the position around the wheel. Saturation controls how colorful an HSL color is. Lightness moves it toward black or white. Opacity, also called alpha, controls how much of the background shows through. A hue change cannot make a gray swatch colorful: raise its saturation too.

This tool uses an HSL wheel: red is at 0°, green at 120° and blue at 240°. It describes screen colors; it is not a model for mixing paint. Equally spaced HSL hues also do not necessarily look equally bright. See CSS Color 4  for the coordinate definitions.

The five swatches are palette slots, not necessarily five unique hues. Editing any slot makes that color the reference for the selected harmony: unlocked partners adopt the hue relationship, saturation and opacity, with the scheme’s lightness offsets. Locked partners keep their values. An arbitrary preset or imported palette keeps its exact colors until you edit it or change the harmony.

For independent changes, lock the other swatches first. For inspiration, use the arrow beside New palette in the top toolbar to choose a mood and generate a palette immediately; the mood affects generation, not the appearance of a finished component. Click the named generation button for another palette in the same mood. Open Starting palettes in the toolbar to browse the dialog by type: bold and varied, soft and pastel, nature and botanical, warm and earthy, cool and aquatic, or neutrals with accents. Open sections to compare their five-color combinations side by side; multiple sections can stay expanded, or you can close them all. Selecting a starting palette closes the dialog and replaces only unlocked slots. Undo, Redo and Reset are also in the toolbar. They are examples, not pre-certified accessible themes.

Use harmony to explore possibilities, then judge the result in context. A complementary accent can still be unreadable on its background. For charts, add labels, patterns or shapes instead of expecting hue alone to identify every series.

WCAG contrast: check each foreground and background

Contrast describes the difference in relative luminance between two colors. The ratio runs from 1:1 for identical luminance to 21:1 for black against white. Color Studio calculates WCAG 2.2 ratios; it does not perform a complete page audit.

Large text means at least 18 pt (24 CSS px), or 14 pt bold (about 18.67 CSS px). A heading is not automatically large text. Pass/fail uses the unrounded ratio: 4.499:1 does not meet 4.5:1. The minimum text contrast  and enhanced contrast  explanations describe the criteria and exceptions.

The UI/graphics check is a ratio check. Which borders, icons or states must meet it depends on what people need to identify or understand; decorative elements do not all require 3:1. Review non-text contrast  for that distinction.

Transparency, gradients and changing states

The checker places a transparent background on white, then composites the foreground over it. For a translucent component on a different surface, test its final composited background color. Otherwise the displayed result describes a different pair from your page.

Check hover, focus, selected and error states separately. A gradient or photograph needs checks at the least favorable area behind the text, not just at its endpoints. Click the dotted color control beside Text color or Background color to choose from the five-color palette or enter a custom value for that field. Text follows the selected palette color when you select or edit it. Manual text values and AA suggestions remain until the next palette selection or edit; switching tabs does not reset them. Suggest AA text color keeps the background fixed; Suggest AA background color keeps the text fixed. Each searches for an opaque candidate reaching 4.5:1 and changes only its own contrast field, not your palette. With very transparent text, no background candidate may pass; increase text opacity or change the text color in that case.

Use visible labels or icons with errors, and another cue alongside colored chart series. This follows WCAG’s use of color  guidance. For an implementation example that also covers keyboard operation and status feedback, see Build a Copy-to-Clipboard Button That Works for Everyone.

Convert HEX, RGB, HSL and OKLCH

Different notations can describe the same color. Choose a format for how you intend to edit or use it; converting a value does not improve its contrast.

These examples demonstrate accepted syntax; they are not all exact conversions of one color. Alpha 0 is transparent and 1 is opaque. 80 in HEX is 128/255, approximately 50.2%, not exactly 50%.

The editor accepts HEX with 3, 4, 6 or 8 digits. RGB channels accept 0–255 or percentages; HSL saturation and lightness require percentages. Alpha accepts 0–1 or 0–100%. OKLCH lightness accepts 0–1 or a percentage; chroma accepts 0–1, with 100% representing 0.4. Oklab uses the same lightness range; its a/b axes accept -0.4 to 0.4 or percentages where 100% is 0.4. Hue accepts degrees, radians, turns or gradians. Use decimal points, including on the French page.

Named colors, CSS variables, calc(), relative colors, none and color(display-p3 ...) are not accepted. Paste a resolved numeric value instead. Inputs are limited to 128 characters; out-of-range channels are rejected rather than silently clamped. HSV and CMYK are conversion outputs, not accepted input syntaxes.

HSL lightness and OKLCH lightness are different

HSL lightness is convenient for editing, but it is not a measure of perceived brightness. Matching two HSL lightness percentages does not match their appearance or contrast. OKLCH uses Oklab’s perceptual lightness with polar chroma and hue coordinates. Its hue angles are not interchangeable with HSL hue angles. Björn Ottosson’s Oklab explanation  gives the underlying model; MDN’s OKLCH reference  covers CSS syntax, including features beyond this tool’s parser.

Color Studio works in sRGB. An OKLCH color outside that gamut is brought into range by reducing chroma at fixed lightness and hue. This can produce a less vivid color; it is not the browser’s full CSS gamut-mapping algorithm. HEX exports round to 8-bit channels. HSV and the approximate, unprofiled CMYK output omit alpha. Production printing needs a color-managed workflow with the appropriate printer, ink and paper profile.

Generate shade scales and CSS gradients

Shades creates 11 OKLCH lightness steps labeled 50 through 950. The labels are names, not percentages or contrast scores, and do not reproduce a named CSS framework’s palette. Chroma is reduced where needed to keep each shade inside sRGB; opacity is retained. The original color is not guaranteed to appear at step 500, or anywhere in the generated scale.

Use a light step for a tinted panel and a dark step for its text, then check that pair in Contrast. The dotted color control beside the Shades heading opens a palette popup. Choose one of the five colors or enter a custom color just for this scale; the palette stays unchanged. Clicking a shade copies its HEX code; copying an individual shade or a whole scale leaves the palette and undo history unchanged. Lightness spacing alone never guarantees that neighboring steps have sufficient contrast.

Gradient blends two chosen palette slots or custom endpoint colors with 2–25 stops and an angle from 0° to 360°. In CSS, 0° points upward and 90° points right. sRGB and Oklab interpolation can produce different intermediate colors; compare both for your endpoints. For a decorative banner, a useful first trial is Oklab with nine stops at 90°.

Drag the angle dial with a mouse or touch, or click its dotted degree value to type an exact angle. The preview stays visible at the last applied angle while you type. Enter applies the value; Escape cancels. The dial supports arrow keys (1°), Shift+arrow (10°), Home (0°) and End (360°). Move the stops slider and compare the interpolation radio choices.

The Oklab option samples the blend into sRGB stops. The exported CSS and preview interpolate between those stops in sRGB; more stops approximate the Oklab path more closely. Two stops contain only the endpoints, so they cannot preserve an Oklab intermediate path. Transparent endpoints also depend on the surface beneath the gradient. Check text on the rendered result.

Turn a palette into reusable CSS roles

The All palette scales option exports all five 11-step scales together, for 55 values. Both individual scales and batch exports are free.

The Export tab names colors --color-1 through --color-5; SCSS uses $color-1, and JSON uses "color-1" keys. Choose HEX, RGB, HSL, Oklab or OKLCH with CSS color format in Gradient or Export. The choice applies to gradient stops, palette exports and whole shade scales, and is included in shared codes. Clicking an individual shade still copies HEX. Color notation is independent of interpolation: non-HEX gradient exports explicitly use in srgb between the sampled stops to keep the same blend as the preview. These modern formats require browser support for their CSS syntax; HEX remains the default. See CSS Images 4  for explicit interpolation syntax.

Map palette slots to meaningful roles in your stylesheet so components do not depend on a particular shade name. This manually assembled example uses the same five-variable structure as the CSS export:

:root {
  --color-1: #F8FAFC;
  --color-2: #FFFFFF;
  --color-3: #1E293B;
  --color-4: #1D4ED8;
  --color-5: #1E40AF;

  --page-bg: var(--color-1);
  --surface: var(--color-2);
  --text: var(--color-3);
  --action: var(--color-4);
  --action-hover: var(--color-5);
  --on-action: var(--color-2);
}

body {
  background: var(--page-bg);
  color: var(--text);
}

.card {
  background: var(--surface);
  color: var(--text);
}

.button-primary {
  background: var(--action);
  color: var(--on-action);
}

.button-primary:hover {
  background: var(--action-hover);
}

Try #FFFFFF on #1D4ED8 in Contrast: the ratio is approximately 6.70:1, meeting ordinary AA text contrast. Repeat for the hover fill and every pair you actually use. This snippet only illustrates color roles; retain the component’s keyboard focus styling and other interaction behavior. For a dark theme, remap the semantic roles to separately checked colors rather than renaming every component rule.

Adjust hues on the wheel

Drag a numbered marker around the wheel to change that swatch’s hue and update the other unlocked colors. The marker numbers match the palette order. Swatches sharing a hue occupy different radii so each remains reachable; their radial position does not represent saturation or lightness.

You can also focus a marker with Tab and use the arrow keys for one-degree steps, or Shift plus an arrow for ten degrees. Home chooses 0 degrees and End chooses 359 degrees. Escape cancels an active drag and restores the preceding palette. A completed drag is one Undo step. Saturation, lightness and opacity remain available in the labeled sliders.

Keep or share a color combination

The code in the Share tab preserves all five colors and their transparency, locks, selected color, harmony and mood, contrast inputs, gradient settings, and custom colors used by individual tabs. Colors retain their full internal precision. The code works on either language version; it does not store your open tab, export format, batch-scale selection or undo history.

A share link keeps the code after #colors= in its URL. The fragment is read locally and is not sent in the page request; the tool does not create an account, upload a palette or save it in browser storage. Anyone with the code can restore its settings. A pasted URL is decoded without fetching that address. Invalid, damaged or unsupported codes leave your palette intact.

When you edit a palette opened from a share link, its fragment stays in sync with valid settings. Ordinary visits do not acquire a fragment automatically. Keep the code or a copied link to return to the combination later.

Common questions

Why did the other colors change when I edited one?

The selected harmony links unlocked swatches. Lock colors you want to keep before editing a partner. A lock protects against indirect changes, not your deliberate edits to that swatch. Undo restores the entire previous palette.

Why does dragging the wheel do nothing to a gray, black or white color?

The wheel changes hue only. With zero saturation, hue has no visible effect; at the lightness extremes the color remains black or white. Adjust saturation and lightness with the sliders, then try the wheel again.

Does a passing contrast pair make my palette accessible?

Only that pair meets the displayed ratio threshold. Font size, adjacent colors, interaction states and non-color cues still matter. There is no automatic test of every palette pair or color-vision simulation here.

Can I save or import a palette file?

You can download CSS, SCSS or JSON for your project. Restore editing settings with a palette code or share URL in Share; exported JSON is not an import format. There is no automatic saved-palette library. Keep a code or link before leaving the page.

Can I extract colors from an image or prepare print colors?

This tool edits numeric colors and palettes; it does not extract image palettes or generate ICC-profiled print output. Its CMYK values are approximate. Use the original brand specification and a suitable color-managed print tool for production artwork.

References and further reading

• CSS Color Module Level 4 : the W3C specification for color notations, spaces and conversions.
• MDN: oklch() : syntax, examples and browser compatibility.
• A perceptual color space for image processing : the original Oklab model, matrices and design goals.
• WCAG 2.2 : the normative accessibility recommendation. The linked WAI explanations above clarify text contrast, non-text contrast and use of color.