Color intelligence for modern design systems

Hue Codex

Design, test, and export trustworthy color systems.

Convert colors, verify accessibility, model palettes, explore references, and prepare ready-to-use CSS, palette data, SVG, and role-based exports from one focused color workspace.

Use the free picker, converter, palette, contrast, CSS, gradient, reference, image, and accessibility tools for everyday color decisions.

Primary#4169E1 Accent#06D6A0 Surface#FBFAF5 Text#10212B Warning#FFD166 Danger#EF476F
10
color models
WCAG
contrast logic
URL
palette sharing

Color workspace

One workspace for practical color decisions.

Start with a seed color, inspect its formats and contrast, preview a role-based palette, then copy a production-ready handoff or continue into the flagship tools.

Recommendation

Good as a primary action color.

Best text on selected color: #FFFFFF. Selected color on white: 4.85:1.

Color engine

Seed color

Selected color #4169E1 Best text: #FFFFFF
Role
Primary
Best text
#FFFFFF
On white
4.85:1
Gamut
sRGB

Accepts 3, 6, or 8 digit HEX.

Seed demo

--color-seed: #4169E1;

Palette model

Roles and metadata

Contrast engine

WCAG check

AA
Accessible color decisions Normal text, large text, and interface states use the same deterministic ratio.

Export model

Export formats

Color platform

Built for the full color workflow.

01

Color conversion

Translate HEX, RGB, HSL, HSV, HWB, XYZ, LAB, LCH, OKLAB, and OKLCH from one dependable engine.

02

Accessibility checks

Measure WCAG contrast ratios, normal text, large text, AA and AAA states, and readable text choices.

03

Palette modeling

Give every color a role, name, note, tag, accessibility profile, and shareable palette identity.

04

Ready-to-use exports

Copy CSS variables, download palette data, generate SVG palette strips, and prepare reusable color roles.

05

Local workspace

Save named presets, pinned colors, recent palettes, contrast pairs, gradients, image samples, and exports in this browser.

06

Reference library

Pair the tools with guides, named colors, glossary terms, accessibility notes, and real-world color context.

Reusable tool-page layout

Consistent utility pages without clutter.

Each tool can support settings, result panels, reference notes, related tools, export actions, and search-readable content in a familiar interface.

Color library

Clear color knowledge, built into the tools.

Hue Codex pairs practical utilities with concise reference material so teams can understand formats, accessibility, palette roles, exports, and brand color decisions in one place.

Color formats

Compare legacy and modern color spaces, including HEX, RGB, HSL, LAB, LCH, OKLAB, and OKLCH.

Accessibility

Check readable foreground and background pairs with practical WCAG contrast results.

Design systems

Move from color picks to named roles, CSS variables, palette-data exports, SVG strips, and reusable structures.

Product updates

Follow the growing color toolkit.

The core free tools and local browser workspace are available now. Upcoming work will expand optional accounts, brand-system workflows, advanced exports, and professional color deliverables.

Last updated July 7, 2026

  1. Available Everyday color tools Picker, converter, CSS syntax, harmonies, tints, palettes, contrast, accessible text, gradients, and shareable palette URLs.
  2. Available Reference and review tools Named colors, glossary, model comparison, gamut, Delta E, blending, opacity, image tools, simulations, focus, links, and guide sections.
  3. Available Local browser workspace Named tool presets, recent and pinned colors, palettes, contrast pairs, gradients, image samples, recent exports, clear local data, and .huecodex.json import/export.
  4. Next Accounts and team saving Optional accounts, cloud project folders, public palette pages, private palettes, and cross-device team workflows are still planned for later.
  5. Next Expanded export options ASE, GPL, Tailwind, batch ZIP exports, and deeper export history for team handoff.
  6. Next UI preview tools Landing page, form, button state, blog, dashboard, ecommerce, and portfolio previews driven by palette roles.

Get Hue Codex updates

Updates on new color tools, export formats, and brand-system workflows.

Core answers

Hue Codex basics

A quick map of the tools, guides, accessibility checks, palette workflows, local workspace, exports, and image resources available across the site.

What is Hue Codex?

Hue Codex is a practical color workspace for people who need dependable color decisions. It brings together color picking, conversion, palette building, accessibility checks, image color tools, gradient tools, exports, local browser saving, search, and reference guides in one focused place.

What color tools are available?

Hue Codex includes more than two dozen free tools for picking colors, converting formats, generating palettes, checking contrast, finding readable text colors, building harmonies, creating tints and shades, making gradients, extracting gradient palettes, comparing color models, checking gamut, measuring color difference, blending colors, adjusting opacity, sampling images, extracting image palettes, designing duotones, previewing color-vision differences, checking focus rings, and reviewing link colors.

Can Hue Codex help with accessible color?

Yes. Hue Codex includes contrast checking, accessible text suggestions, readable pair finding, color-vision simulation, focus ring checks, and link color checks. The goal is to help color choices stay readable, visible, and understandable in real layouts.

Can I build and share palettes?

Yes. You can generate role-based palettes, lock colors you want to keep, copy values, download visual palette strips, save local presets, pin useful palettes, and share palette URLs without creating an account. Shared palettes keep roles, readable text choices, and export options together.

Can I save color work without an account?

Yes. The local browser workspace saves named tool presets, recent colors, pinned colors, recent palettes, pinned palettes, contrast pairs, gradients, image samples, and recent exports in your browser. You can clear local workspace data, export it as a .huecodex.json file, or import a .huecodex.json file later.

Is the workspace private?

The current workspace is local to the browser you use. Hue Codex stores the workspace in browser storage and does not upload it for the browser-side tools. Image tools store sampled colors and labels for workspace history, not the original image file.

What guides and reference resources are included?

The guide library covers hue, HEX vs RGB vs HSL, contrast basics, color wheels, tints and shades, CSS color formats, logo color, color theory, web color, accessibility, logo psychology, industry color, cultural color notes, dark mode, chart color, print vs screen, and palette anatomy. Hue Codex also includes CSS named colors and a searchable color glossary.

Can I work with images and gradients?

Yes. Hue Codex can sample colors from images, extract starting-point image palettes, tune duotone image treatments, create CSS gradients, and pull usable swatches from gradient paths. Image tools run in your browser so you can inspect colors without uploading the image.

What can I export from Hue Codex?

Hue Codex provides copy-ready CSS variables, palette data, color-role output, SVG palette strips, PNG palette images, contrast reports, gamut notes, gradient values, and color model values. You can also export your local browser workspace as a .huecodex.json file, then import it later or use it to move saved presets, pinned colors, palettes, contrast pairs, gradients, image samples, and recent exports to another browser or device.

Do I need an account?

No. The current tools, guides, search, shareable URLs, and local browser workspace are free to use without an account. Optional accounts, cloud project folders, public palette pages, and private cross-device palette storage are planned for later.

Does Hue Codex use AI for color math?

No. Hue Codex keeps core color conversion and contrast checks repeatable. AI can help with naming, brand interpretation, rationale, education, and structured reports, but the color math itself stays consistent.