Color Picker & Palette Studio

How to use the color picker

The studio has three ways to set a color, and they always agree with each other. Open the native picker for a visual choice, type a code into the HEX field, or drag the RGB and HSL sliders. Whatever you touch, the other controls follow immediately: change the hue slider and the red, green and blue numbers move with it; paste #1e7a53 into the HEX field and the sliders jump to that position.

1. Choose a starting color. Use the native picker, type a value, or press Random color to explore.
2. Read it in context. The preview block renders your color as a button, body text, a card and a border, so you can judge it as a UI color instead of an abstract chip.
3. Check the contrast. The checker reports the exact ratio against both white and black with AA and AAA verdicts for normal and large text.
4. Grow a palette. The generator produces complementary, analogous, triadic and split-complementary partners plus a 50–950 shade ramp of the base hue.
5. Copy what you need. Grab #HEX, rgb(), hsl() or a complete CSS custom-property block. Click any generated swatch to make it the current color.

Nothing is uploaded. The tool is a single static page, so it also works when you are offline or behind a firewall that blocks third-party services.

Understanding HEX, RGB and HSL

All three notations describe the same sRGB color space; they differ only in how they describe it. HEX and RGB are the machine's view — three 8-bit channels. HSL is the designer's view — a hue angle on the color wheel plus saturation and lightness percentages, which makes it far easier to create a lighter tint or a desaturated variant by hand.

Two practical notes. First, a HEX code is just base-16 RGB: #2456e6 means red 0x24, green 0x56, blue 0xe6, or rgb(36 86 230). Second, HSL is a mathematical transform of that RGB triplet, not a wider color space, so converting a color to HSL and back can shift a channel by one step because of rounding. If exact fidelity matters, keep the value you started with — for example the HEX code you copied out of a brand guide.

Choosing accessible colors

WCAG contrast is computed from relative luminance, a weighted measure of how much light a color emits after the sRGB channels are linearised. The ratio between the lighter and darker of two colors is (L1 + 0.05) / (L2 + 0.05), which runs from 1:1 for two identical colors to 21:1 for black on white. Two thresholds do most of the work in practice:

• 4.5:1 for normal text (AA). This is the baseline for paragraphs, labels, links and anything else read at body size. The contrast checker above shows a PASS badge for each background once your color clears it.
• 3:1 for large text (AA). Text at roughly 24 px regular or 18.66 px bold counts as large, and the relaxed threshold recognises that thicker strokes are easier to resolve. The same 3:1 floor applies to non-text interface parts — input borders, icons that carry meaning and focus indicators.
• 7:1 for AAA. The enhanced level for normal text. It is a good target for long-form reading, dense data tables and any interface used in bright sunlight.

A few habits make hitting those numbers easier. Check the color against both white and black before you commit — a mid-tone blue may pass on white and fail on a dark theme. Remember that transparency lowers effective contrast, so a 60%-opacity overlay should be checked against the color actually rendered beneath it. And never rely on color alone to carry meaning: pair it with an icon, a label or an underline so the information survives for color-blind readers.

Copying colors into CSS

The copy buttons produce values you can paste without editing. A reliable pattern is to declare your color once as a custom property and reference it everywhere, so a rebrand is a one-line change:

:root {
  --brand: #2456e6;
  --brand-soft: #eaefff;
  --brand-ink: #ffffff;
}

.button {
  background: var(--brand);
  color: var(--brand-ink);
}

.notice {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  color: #0d1526;
}

The Copy CSS variables button emits exactly this shape, using your current color plus a light companion derived from it. A few details worth knowing when you paste color values:

• Modern CSS accepts space-separated channels — rgb(36 86 230) — and reserves commas for the legacy syntax. Both still work; pick one and stay consistent.
• Alpha can be written either way: rgb(36 86 230 / 60%) or hsl(224 72% 52% / 0.6).
• Custom properties are inherited and untyped, so they can hold any notation you like as long as you use the value in a position that accepts it.
• For theming, define the dark-mode overrides under @media (prefers-color-scheme: dark) and change only the variables, not the rules that consume them.