Skip to content
ColorCodes.dev

Modern Color Tools for Designers & Developers

Convert colors, browse named colors, check accessibility, generate palettes, and work with modern color spaces including HEX, RGB, HSL, LAB, LCH and OKLCH.

Custom picker

Fine-tune your color

Drag the field, adjust hue and alpha, or paste any supported format.

110°
100%

Tip: you can paste formats like #3f7f2f, rgb(63, 127, 47), hsl(110, 45%, 35%), or oklch(0.7, 0.1, 220).

Formats

The same color in different formats:

Preview
No color name
Default preview
Current value
#3f7f2f
Open HEX
Foreground preview
WCAG contrast checker and foreground picker
Best auto foreground
Best contrast with white
#ffffff
Auto-selects the strongest contrast against the current background.
Readable text preview
The quick brown fox jumps over the lazy dog.
Button preview
Contrast ratio
—
Pending analysis
Element AA AAA
Small text — —
Large text — —
UI elements / graphics — N/A
AA for normal text is typically 4.5:1, AA for large text 3:1, AAA for normal text 7:1, and non-text UI elements typically 3:1.

Start Here

The fastest paths into the site.

Live tool

Color Picker

Pick a color visually, paste a code, convert formats, and inspect contrast.

Named colors

Color Catalog

Browse named colors and open their canonical pages.

SEO page

Teal in HEX

Jump into a format page with conversions and related content.

Color Tools

Professional tools for color conversion, accessibility and design workflows.

Color Picker
Visual color selection with live conversion and accessibility checks.
Color Catalog
Browse named colors with dedicated SEO-friendly pages.
HEX Converter
Convert HEX colors to RGB, HSL, CMYK, LAB and OKLCH.
RGB Converter
Convert RGB values into every major color format.
Contrast Checker
Coming soon as a dedicated tool.
Palette Generator
Planned feature for creating harmonious color palettes.

Supported Color Formats

Direct access to each conversion engine.

HEX
RGB
RGBA
HSL
HSLA
CMYK
LAB
LCH
OKLCH

Color Conversion

Same color in multiple code formats.

HEX
HTML/CSS
#3f7f2f
RGB
HTML/CSS
rgb(63 127 47)
RGBA
HTML/CSS
rgba(63 127 47 / 1)
HSL
HTML/CSS
hsl(110 45% 35%)
HSLA
HTML/CSS
hsla(110 45% 35% / 1)
CMYK
HTML/CSS
cmyk(50 0 63 50)
LAB
HTML/CSS
lab(0 0 0)
LCH
HTML/CSS
lch(0 0 0)
OKLCH
HTML/CSS
oklch(0 0 0)

Export formats

Ready-to-copy snippets for developers, apps, frameworks, and design systems.

#3F7F2F
Design tokens
Tokens
CSS variable
Tokens
JSON token
Tokens
Tailwind config
Tokens
SCSS variable
Tokens
Web / frontend
Frontend
JavaScript
Frontend
TypeScript
Frontend
Inline style
Frontend
CSS class
Frontend
Mobile / app
Mobile
Android XML
Mobile
SwiftUI
Mobile
Swift UIColor
Mobile
Kotlin
Mobile
Flutter
Mobile
React Native
Mobile
SVG / graphics
Graphics
SVG fill
Graphics
SVG stroke
Graphics

Color Variations

tint / shade
Tint
Lightened version
#3f7f2f
Shade
Darkened version
#2d5a22
Tone
Muted version
#5f8b57
Monochrome
Single-hue family
#24471c

Related content

auto-linked
Tags
Styles
Use cases
Palettes
Similar colors

Meaning / Aesthetic / Framework

content ready
Meaning
Aesthetic
Framework

Popular Colors

Named colors that open both the color page and the format pages.

Teal
#0f766e
Blue
#3b82f6
Red
#ef4444
Emerald Green
#10b981
Amber
#f59e0b
Violet
#8b5cf6
Rose
#f43f5e
Slate
#64748b

Developer Friendly

Fast conversion pages, canonical URLs, and clear long-tail landing pages.

Accessibility

Check contrast and make readable foreground choices for UI and content.

Color Science

Explore LAB, LCH, OKLCH and other modern color representations.

Color Catalog

Discover named colors, meanings, and format-specific search intent.

Color Tools & Color Catalog

ColorCodes.dev is a focused color reference built for named colors, modern color spaces, and practical UI work. Find a color, open its dedicated page, switch formats, and compare contrast without leaving the site.

The platform is designed around strong landing pages for color names and format-specific searches such as Teal in HEX, Teal in RGB, and Teal in OKLCH. That keeps the structure clean for users and useful for search.

Frequently Asked Questions

What is ColorCodes.dev?

A color reference and conversion site for named colors, modern color spaces, contrast checking, and SEO-friendly color pages.

What can I do with the color picker?

Pick a color visually, paste a code, convert between formats, and verify accessibility contrast.

What pages are indexed first?

The homepage, named color pages, named format pages, and the color picker.

Do you support modern color spaces?

Yes. The site supports HEX, RGB, RGBA, HSL, HSLA, CMYK, LAB, LCH and OKLCH.

Ready to work with colors?

Open the picker, browse named colors, or jump straight into the format pages.

Open Color Picker Browse Color Catalog Teal in OKLCH