Skip to content
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
4.90
Passes AA for normal text
Element AA AAA
Small text Pass Fail
Large text Pass —
UI elements / graphics Pass 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.

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(108 45% 34%)
HSLA
HTML/CSS
hsla(108 45% 34% / 1)
CMYK
HTML/CSS
cmyk(50.39 0 62.99 50.2)
LAB
HTML/CSS
lab(47.5466 -36.6753 36.4145)
LCH
HTML/CSS
lch(47.5466 51.6826 135.2)
OKLCH
HTML/CSS
oklch(0.5355 0.1318 139.77)

Formats

The same color in different formats:

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
#75a369
Shade
Darkened version
#306124
Tone
Muted version
#4d7f41
Monochrome
Single-hue family
#1e3c16

Related content

auto-linked
Tags
Styles
Use cases
Palettes
Similar colors

Meaning / Aesthetic / Framework

content ready
Meaning
Aesthetic
Framework

Why this tool matters

Fast workflow

Pick a color or paste a format and instantly get all representations.

Engine-backed

The same engine powers canonical color pages, alias routes, and future tools.

SEO-friendly

The picker becomes a utility page that supports content clusters and long-tail growth.