Free online color picker
Turn any color into a production-ready decision.
Pick a color, define its role, validate exact contexts, repair, and export.
Scoped color decision
Is this color ready for its intended use?
Choose the color, role, and exact context. Hue Codex keeps the decision, repair, preview, and export in one contract.
Color · use · context · decision
Make one scoped color decision
1 Color
Selected color
CSS colors including OKLCH, named colors, and alpha.
4 Decision
Current decision
Interactive text: fails the selected dark context.
4.85:1 on #FFFFFF · 3.41:1 on #10212B · target 4.5:1
The selected light pair passes and the selected dark pair fails.
Scope: This result covers the configured accent text use and selected backgrounds, not the complete interactive component.
Next: Find the nearest color that passes every selected background.
Optional repair
Context matrix
1 pass · 1 fail
| Check | Light theme | Dark theme |
|---|---|---|
| Interactive text |
Selected pair previewSelected text in its tested contextThe quick brown fox jumps over the lazy dog.
View selected evidence
The quick brown fox jumps over the lazy dog.
Selected matrix evidence
Interactive text · Light theme
#4169E1 on #FFFFFF is 4.85:1 and meets the selected 4.5:1 target.
Production examples
Interactive fill and editable states
More constraints
Advanced gamut and source details
Try an example color
Recent colors
Fast returns for comparison.
Advanced numeric formats and individual copy values
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Color Picker.
Methodology pages
Related guides
How it fits
Use the picker as a color hub.
Every selected color can move directly into conversion, contrast, palette generation, CSS syntax, and color scale work.
Production formats
Review HEX, RGB, HSL, HSV, HWB, Lab, LCH, OKLab, and OKLCH values from one selected color.
Recent colors
Keep the last colors you touched close by so comparison and iteration stay fast.
Send-to workflows
Open the same color in the converter, palette generator, contrast checker, CSS generator, or tint and shade tool.
Quick overview
Hue Codex Color Picker turns a source color into a scoped design decision. Enter HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH, supported color() syntax, a named color, or transparent; then define how the color will be used, evaluate relevant light and dark contexts, compare bounded deterministic selected-color repairs when applicable, and export semantic CSS, Tailwind v4 CSS, or the documented DTCG 2025.10 color-token subset.
- Define Usage before treating a contrast ratio as a decision: body text, large text, icons, borders, focus indicators, accents, surfaces, decorative color, and data series need different evidence.
- Pass, fail, review required, incomplete, and not applicable are kept distinct so a color is never presented as universally accessible.
- Repair searches only the selected color, preserves alpha, reports the tested contexts, and keeps the original recoverable through undo.
- Picking, role validation, comparison, repair, sharing, and semantic exports run locally in the browser without an account.
What the Hue Codex color picker does
The Hue Codex color picker turns one selected color into a scoped decision instead of stopping at equivalent numbers. Start with the visual picker, paste a supported CSS color value, generate a random color, reuse recent colors, or sample from the screen when the browser exposes the EyeDropper API.
Define the color’s Usage and selected contexts to receive relevant evidence. Text and meaningful non-text roles use WCAG contrast checks; borders, focus indicators, surfaces, decorative colors, and data series also surface role-specific review or completeness limits. Every valid color still includes copyable HEX, RGB, HSL, HSV, HWB, XYZ, Lab, LCH, OKLab, and OKLCH values.
A color picker is a tool for selecting a visible color and retrieving its numeric color values, such as HEX for design handoff, RGB for screen channels, HSL for manual adjustment, and OKLCH for perceptual CSS color work. It is also commonly called a color chooser, color selector, or color code picker.
Supported color formats
The picker accepts alpha HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() profiles, fixed named colors, and transparent. HSV is output-only because it is a picker model rather than a CSS color function; XYZ is accepted through supported color(xyz ...) syntax. The output list is intentionally broader because real color work often needs perceptual formats, accessibility checks, CSS syntax, and role documentation.
| Format | Example | Best use |
|---|---|---|
| HEX | #4169E1 | Compact brand values, design handoff, color roles, and quick copying. |
| RGB | rgb(65 105 225) | Screen-channel thinking, generated code, canvas work, and alpha overlays. |
| HSL | hsl(225 73% 57%) | Manual hue, saturation, and lightness adjustment in CSS. |
| HSV and HWB | hsv(232 76% 100%) and hwb(225 25% 12%) | Picker-style hue workflows, whiteness/blackness edits, and color-model comparison. |
| XYZ, Lab, and LCH | color(xyz-d65 ...), lab(...), lch(...) | Color science context, perceptual comparison, and documentation beyond basic web notation. |
| OKLab and OKLCH | oklab(...) and oklch(...) | Modern perceptual color scales, CSS Color 4 workflows, and more consistent hue/lightness tuning. |
Best uses for the color picker
The picker is most useful at the beginning of a color decision. It helps capture the exact source color, then passes that same value into the next step instead of making you retype or reinterpret the color.
Web CSS
Copy HEX, RGB, HSL, Lab, LCH, OKLab, or OKLCH values for component styles, custom properties, themes, and modern CSS experiments.
Color roles
Declare whether the source is text, an icon, a meaningful border, a focus indicator, an interactive accent, a surface, decorative color, or part of a data series before interpreting the evidence.
Accessibility checks
Use the role-aware matrix to review only the selected Usage and contexts. A passing color ratio does not validate focus geometry, component state, data meaning, typography, or the complete page, so unresolved requirements remain marked for review.
Palette exploration
Move the same color into the palette generator, harmony tool, or tint and shade generator to turn a single color into a fuller color system.
Why Lab, OKLab, and OKLCH are included
Basic web color pickers often stop at HEX, RGB, and HSL. Hue Codex includes Lab, LCH, OKLab, and OKLCH because modern color work increasingly needs perceptual models: models that better describe how changes in lightness, chroma, and hue feel to human vision.
OKLCH is especially useful for building color ramps because lightness and chroma can be adjusted more predictably than raw RGB channel values. It does not replace contrast testing, but it gives teams a better starting point for palettes, states, and color roles.
Format choice does not make a color accessible by itself. Readability depends on the final foreground/background pair, so selected colors should still be checked in context.
A practical workflow after picking a color
After choosing a color, define its intended Usage and the backgrounds or comparison colors that matter. Review the primary decision first, inspect matrix evidence, apply a deterministic selected-color repair only when that scope makes sense, and then export or open a related Hue Codex workflow.
- Pick or enter the source color without losing its alpha.
- Define Usage, theme contexts, backgrounds, gamut, and the applicable target.
- Read the scoped primary decision and inspect the matrix evidence behind it.
- Compare and optionally apply a passing selected-color repair from the bounded deterministic candidate set when the role supports one.
- Export semantic CSS, Tailwind v4 CSS, the documented DTCG Format/Color subset, a Resolver companion, or an accessibility report, or use Next actions to continue in another tool.
Quick answers
Color Picker FAQ
What is the Hue Codex color picker?
The Hue Codex color picker is a free online tool for selecting a color and copying its HEX, RGB, HSL, HSV, HWB, XYZ, Lab, LCH, OKLab, and OKLCH values.
Can I use it as a HEX color picker or color code picker?
Yes. The picker shows an opaque selection as six-digit HEX and a translucent selection as eight-digit HEX, then includes the same alpha channel in matching RGB, HSL, Lab, LCH, OKLab, and OKLCH output.
Does the color picker support OKLCH?
Yes. Every selected color includes an OKLCH output value, which is useful for modern CSS color work, perceptual color scales, and role documentation.
Can I check whether a picked color is accessible?
The picker supports inline WCAG 2.x color-contrast checks for selected foreground/background contexts and labels each result as pass, fail, review required, incomplete, or not applicable. A passing result covers only the declared Usage, named pair, alpha, and threshold; it does not certify the complete component, interaction, chart, or page.
Is the color picker free?
Yes. The Hue Codex color picker is free to use in the browser and does not require an account.
What does “Minimal perceptual change” mean?
It means the passing serialized sRGB candidate with the smallest scaled Euclidean OKLab distance from the source among the bounded candidates evaluated by Repair Methodology 2.0. Alpha stays unchanged. This is a perceptually oriented product objective, not proof of the globally nearest color.
Does repair find the globally nearest passing color?
No. Repair 2.0 uses a deterministic bounded search with documented objectives and tie-breakers. It can reproduce the same result for the same inputs, but it does not mathematically search every possible color or prove a global optimum.
How does repair handle light and dark contexts?
The same selected-color candidate must pass every enabled context at the selected raw threshold after alpha compositing and exact sRGB serialization. Repair never changes the background colors to make a candidate pass.
What does “No shared repair found” mean?
It means the bounded search, including local stabilization of its strongest failure, did not find one selected-color candidate that passed every supplied context. A shared solution may be mathematically impossible or outside the evaluated search domain, so the message is not proof that no color exists.
Does repair preserve alpha?
Yes. Repair 2.0 changes only the selected color’s serialized sRGB channels and keeps its alpha unchanged. Each candidate is composited over the resolved opaque contexts before its raw contrast ratio is checked.
Does a passing repaired color make the component accessible?
No. It proves only that the named foreground/background pair passed the applicable color-contrast threshold for the declared role and contexts. Typography, focus geometry, interaction states, non-color cues, chart meaning, placement, and the rest of the component still require review.
Is Token-style JSON the same as DTCG 2025.10 JSON?
No. Token-style JSON is the existing Hue Codex schema and explicitly does not claim DTCG conformance. DTCG 2025.10 JSON is a separate export with structured sRGB values, groups, aliases, and extensions from the documented Format and Color subset.
What is the DTCG Resolver companion?
It is a separate conditional-composition document for compatible DTCG Resolver consumers. It describes the inline token sources, light and dark contexts, theme modifier, default, and resolution order; it is not an ordinary standalone token file.
How are the Tailwind v4 and legacy exports different?
Tailwind v4 CSS-first theme emits CSS with @import "tailwindcss", ordinary source/theme selectors, and @theme inline color variables. Tailwind legacy JavaScript config emits a CommonJS module.exports fragment under theme.extend.colors for older configuration workflows.
Will every design-token or Tailwind importer accept the export?
No universal importer guarantee is made. Hue Codex validates its generated DTCG subset, Resolver references, CSS structure, JSON syntax, and legacy configuration shape; individual tools and build pipelines can still impose different requirements.
Are repaired colors rechecked after rounding?
Yes. Repair decisions are validated against the exact uppercase six-digit sRGB HEX candidate that is exported, with the original alpha kept separately. Pass/fail uses raw contrast ratios; rounding is for display only.
Which repair methodology version does this picker use?
The picker uses Color Picker Repair Methodology 2.0, implementation identifier color-picker-repair-v2. Its generated vectors, objectives, tie-breakers, multi-context behavior, serialization checks, and known limits are documented in the WCAG Contrast methodology.