Color Code Generator

This Color Code Generator is a fast, accurate way to move between the three formats designers and developers use every day: HEX, RGB, and HSL. All fields stay in sync—paste a value into any input and the other two update instantly. The large preview swatch shows live text on top so you can judge readability without guessing.

Beyond simple conversion, the tool doubles as a practical palette generator. You’ll see color harmonies (complementary, analogous, triad) for quick pairing and accent ideas, plus tints and shades that map naturally to UI states—background, hover, active, borders, and subtle chips. If you’re building a system with brand/secondary/tertiary roles or info/warning/success, triads give a balanced starting point in one click.

Accessibility is built in. The WCAG contrast checker evaluates your color against white and black and labels AA/AAA for both normal and large text. As a rule of thumb, AA is 4.5:1 (3:1 for large), AAA is 7:1 (4.5:1 for large). The tool also recommends which text color to use on a solid background so buttons and tags remain readable on every screen.

When a color works, save it to Favorites. Favorites are stored locally in your browser for privacy and speed, and you can export them either as CSS variables (drop straight into :root) or JSON (handy for design tokens, theming, or Storybook args). Use “Copy All” for a quick human-readable paste, or “Copy CSS Vars/JSON” when you want clean, machine-ready output.

The generator is opinionated about workflow but stays flexible. Prefer HSL when exploring—nudge H for hue shifts, dial S down for neutrals, and adjust L to fine-tune contrast without wrecking the hue. Once you’re set, convert to HEX or RGB for production. If you’re using Tailwind, export CSS vars and map them to custom colors in your config, or paste HEX values directly into your palette.

Sharing is frictionless. The share button creates a hash-based link that restores the exact color when opened—no uploads, accounts, or tracking. Everything runs in your browser, which keeps the workflow private and snappy even on large projects. Because the app assumes sRGB like modern browsers, results align with what you’ll ship.

Typical use cases include: locking in accessible button colors, generating a cohesive palette for a new brand kit, auditing legacy HEX values for WCAG compliance, and exporting tokens to keep design and code in sync. Whether you’re prototyping in Figma, styling in CSS, or wiring themes in JavaScript, this tool gives you conversions, contrast, and palette logic in one dependable place.

Quick start: the fastest way to use it

Pick a base color with Pick color or paste any HEX/RGB/HSL value. The other two fields sync instantly and the preview updates in-place. Use the Copy buttons for single formats, or Copy All when you want to paste everything into a PR or chat.

What inputs are accepted?

HEX: #ff6600 or shorthand #f60. RGB: rgb(255, 102, 0) or 255, 102, 0. HSL: hsl(24, 100%, 50%) or 24, 100%, 50%. Case-insensitive.

Recommended UI workflow

1) Choose color → 2) Check WCAG boxes for AA/AAA → 3) Export CSS Vars to tokens (:root) or JSON for your design system. Save Favorites, and share a link (hash-based) for quick feedback.

What does “Random Color” do?

It sets a random color, updates the preview box immediately, and scrolls it into view if needed. Try tweaking via HSL afterwards—raise L for lighter backgrounds, reduce S for softer neutrals.

Contrast rules: AA/AAA and “Large” text

AA requires 4.5:1 for normal text and 3:1 for large text (≈24px regular or ≈19px bold). AAA is stricter: 7:1 and 4.5:1. The “Recommended text” row tells you whether white or black text works best on your color as a background.

When to use complementary, analogous or triad

Complementary (opposites) = high pop for CTAs. Analogous (neighbors) = calm UIs and subtle accents. Triad = balanced three-color sets for info/warn/brand or primary/secondary/tertiary themes.

Tints & Shades: mapping to states

Practical mapping: Tint 3 → backgrounds, Base → primary, Shade 2 → hover, Shade 3 → active, Tint 5 → subtle chips and tags. Use shades for borders when you need stronger separation.

Copy All vs CSS Vars vs JSON

Copy All is for quick human-readable pastes. CSS Vars outputs --color, --color-rgb, --color-hsl in a :root block. JSON mirrors the same values for scripts, themers or Storybook args.

Favorites & sharing

Favorites are stored locally in your browser (localStorage) and can be exported as CSS or JSON. “Copy Link” creates a hash-only URL, so opening it restores the exact color without uploading any data.

Privacy: does the site upload my colors?

No. All inputs and calculations run in your browser. Favorites are saved in your own local storage. The share link uses only the URL hash.

Can I use Tailwind or tokens with this?

Yes. Export CSS variables and drop them in :root or your theme file. For Tailwind, map those variables to custom colors in the config, or paste the HEX values directly into your palette.