Complementary
+180°Opposite hues. Maximum contrast, best for a single accent.
A line straight through the center of the hue wheel.
Start from a color
Color picker and converter for HEX, RGB and more
Paste a hex, drag a slider or pull a color off your screen, and get every format, variation, harmony and accessibility check for it. Need to pull colors out of a photo instead? Use the image color picker on the home page.
Color picker
That is not a color this field can read.
Starting points
lightseagreen
#10A99B
#10A99B is a cool teal at 66% perceived lightness (nearest CSS name: lightseagreen).
Color codes and conversions
- HEXWeb and design tools
#10A99B
- HEX8With an opaque alpha byte
#10A99BFF
- RGBScreen, CSS
rgb(16, 169, 155)
- RGB %Channels as percentages
rgb(6.3%, 66.3%, 60.8%)
- HSLHue / saturation / lightness
hsl(175, 83%, 36%)
- HSVPhotoshop and Figma pickers
hsv(175, 91%, 66%)
- HWBHue plus white and black
hwb(175 6% 34%)
- CMYKPrint separation, uncalibrated
cmyk(91%, 0%, 8%, 34%)
- DecimalSingle 24-bit integer
1091995
- Nearest nameClosest CSS keyword
≈ lightseagreen
Tints, shades and ramps
Variations
One color is rarely enough. These are the lighter, darker and muted relatives of your pick, plus a full design-system scale fitted in OKLCH.
The base color mixed toward white in ten steps. Use tints when a color has to sit behind text: hover states, table stripes and chart fills.
Click any swatch to copy its hex code.
Harmonies and combinations
Six schemes built by rotating the hue in OKLCH. Because OKLCH is perceptual, every color in a scheme has a similar visual weight.
Analogous
-30°, +30°Neighboring hues. Calm and cohesive, low tension.
A tight arc, 60° wide, hugging one side of the wheel.
Triadic
+120°, +240°Three evenly spaced hues. High contrast that still feels balanced.
An equilateral triangle inscribed in the wheel.
Split complementary
+150°, +210°Softer than complementary, keeps the contrast without the clash.
An isosceles triangle straddling the complement.
Tetradic
+90°, +180°, +270°Two complementary pairs. Rich, needs one dominant color.
A square: two complementary pairs at right angles.
Monochromatic
same hue, 5 lightness stepsOne hue at five lightness steps. Safe and always harmonious.
A single spoke, dark at the center to light at the rim.
Accessibility
Contrast checker
The checker starts with your color as the background and black or white text, whichever reads better. Change either color, and if the pair fails, use the suggested fix.
Large text, 24px and up
Body text at a normal size. Text this size needs 4.5:1 to pass WCAG AA, and most color pairs fail here. Read it at arm's length. If you have to lean in, the ratio is too low.
Outlined control
Contrast ratio
7.17
- AA · body text4.5:1—
- AA · large text3:1—
- AAA · body text7:1—
- AAA · large text4.5:1—
- UI and graphics3:1—
Nearest passing text color
Keeps the hue and chroma and changes only the lightness until the pair reaches 4.5:1.
Color blindness simulator
How this color appears to the four common types of color vision deficiency, and whether it stays distinguishable from its complement in each.
What else looks like this to someone with protanopia?
The L (long-wavelength) cone is missing. It is X-linked recessive, so it is far more common in men than in women.
Pick a deficiency above to see what it confuses this color with.
Yours
#82A39B
#AB9D9B
#CA979B
#E4919B
#FA8B9A
All of them appear as#A09F9B
Can this color still be told apart from its complement?
The perceptual distance (ΔE2000) between this color and its complement, as each type of color vision sees them. Below about 10, the two are too close to be the only way to tell states apart. Add a shape, an icon or a label.
- Normal visionΔE 56.4
- ProtanopiaΔE 10.9
- DeuteranopiaΔE 12.1
- TritanopiaΔE 57.7
- AchromatopsiaΔE 3.0
Color science
Technical formats
CIE and perceptual spaces, for color management, print work and checking the math. XYZ, LAB and LUV use the D65 white point with the 2 degree standard observer.
- CIE XYZD65, 2 degree observer
xyz(20.315, 30.85, 35.888)
- CIE xyYChromaticity plus luminance
xyY(0.2334, 0.3544, 30.85)
- CIELABDevice independent, D65
lab(62.38% -38.9 -3.01)
- LCH (ab)Cylindrical CIELAB
lch(62.38% 39.02 184.43)
- CIELUVAdditive-light sibling of LAB
luv(62.38, -48.88, 1.36)
- LCH (uv)Cylindrical CIELUV
lchuv(62.38, 48.9, 178.41)
- OKLabModern perceptual, rectangular
oklab(66.15% -0.1144 -0.0088)
- OKLCHModern CSS, perceptual
oklch(66.15% 0.1147 184.39)
- Linear sRGBGamma removed, for blending
(0.0052, 0.3968, 0.3278)
- LuminanceWCAG relative luminance
0.3085
For your codebase
Practical formats
Ready to paste. The variable names are placeholders, so rename them to match your own system.
Stylesheets
Custom properties and preprocessor variables for CSS, Sass and Tailwind.
- CSS variableCustom property on :root
--brand: #10a99b; - Tailwind v4An @theme entry, OKLCH
--color-brand: oklch(66.15% 0.1147 184.39); - Tailwind classArbitrary value utility
bg-[#10a99b] - SCSSSass variable
$brand: #10a99b;
Native mobile
Color literals for iOS and Android UI code.
- SwiftUIColor, sRGB floats
Color(red: 0.063, green: 0.663, blue: 0.608) - UIKitUIColor, sRGB floats
UIColor(red: 0.063, green: 0.663, blue: 0.608, alpha: 1.0) - Android XMLcolors.xml resource, ARGB
<color name="brand">#FF10A99B</color> - Jetpack ComposeColor, 0xAARRGGBB literal
Color(0xFF10A99B)
Cross-platform & code
Cross-platform frameworks, desktop toolkits, shaders and scripts.
- FlutterDart Color literal
const Color(0xFF10A99B) - .NETSystem.Drawing.Color
Color.FromArgb(255, 16, 169, 155) - Java AWTjava.awt.Color
new Color(16, 169, 155) - QtQColor constructor
QColor(16, 169, 155) - GLSLvec4, 0-1 floats
vec4(0.063, 0.663, 0.608, 1.0) - PythonPillow / OpenCV tuple
(16, 169, 155)
Computed from your color
Color analysis
What this color is, with the reasoning attached. Every row is a computed value and a line saying what it means for a design decision.
Hue
Teal184.4°
Position on the OKLCH hue circle, which spaces hues the way the eye does.
Lightness vs. chroma
L 66.2% · C 0.1147/0.1169The shaded area is every chroma sRGB can render at this hue, from black up to white. The dot is this color.
Reads as
Aa
Light color7.17:1
Relative luminance: 0.3085. WCAG uses this number to calculate every contrast ratio on this page.
Nearest CSS name
lightseagreen
#20B2AA · ΔE 3.6
Web-safe match
#009999
ΔE 7 away
Grayscale
#878787
Rec. 709 luma 135
Complement
#CD738A
180° opposite hue
Nearest ramp stop
500Where this color's lightness falls in a generated 50 to 950 design-system scale.
Every value on this page is computed from the sRGB triplet in your browser. Nothing is looked up from a database of pre-written color pages, so a hex nobody has ever used gets the same treatment as a famous one.
Frequently asked questions
What is the difference between a color picker and an image color picker?
The image color picker on the home page starts from a photo: you load an image and pick pixels from it. This page starts from a color value. Use it when you already have the hex code, for example from a brand guide or a colleague, and need its conversions, variations, accessibility checks and code snippets.
Which color formats can I paste into the field?
Hex in three, four, six or eight digits, with or without the hash; rgb() and rgba() with commas or spaces; hsl() and hsla(); and any of the 148 CSS color keywords such as rebeccapurple or cornflowerblue. Anything it cannot read leaves the current color alone rather than resetting it.
Why use OKLCH instead of HSL?
HSL is not perceptually uniform: two colors at the same HSL lightness can look very different in brightness, so HSL-generated palettes come out uneven. OKLCH fixes that, and every current browser supports it. The variations, harmonies and the suggested accessible color on this page are all computed in OKLCH for that reason.
Is the CMYK conversion accurate for print?
It is the standard uncalibrated formula, which is what most web tools use, and it is fine for a rough idea. It is not a color-managed conversion: a real print job needs an ICC profile for the specific press and paper. Treat the CMYK value here as a starting point to hand to your printer, not a final specification.
What does delta E (ΔE2000) mean?
It is the CIEDE2000 distance between two colors, a measure of how different they look. Under 1, nobody can see the difference. Around 2, a careful viewer can see it side by side. Over 10, they look like different colors. It matches what people see far better than comparing RGB numbers.
How is the contrast ratio calculated?
By the WCAG 2.1 formula: relative luminance of each color in linear light, then (lighter + 0.05) / (darker + 0.05). AA requires 4.5:1 for body text and 3:1 for large text or interface components; AAA requires 7:1 and 4.5:1. The ratio ignores hue, so two colors can look very different and still fail.
Does this color picker send anything to a server?
No. The page ships the color math as JavaScript and runs all of it in your browser. There is no API call when you change the color, nothing is logged, and the page works with the network disconnected after it has loaded.
Can I use these colors commercially?
Yes. A color value is not copyrightable and nothing here carries a license. The generated ramps, harmonies and code snippets are yours to use in any project. A specific color can still be part of a registered trademark or trade dress in a particular product category, so copying a competitor's brand color is a legal question, not a technical one.
How do I convert HEX to RGB?
Paste the HEX code into the field at the top of this page. It converts at once to RGB, HSL, HSV, CMYK, OKLCH and 28 more formats, and each value copies with one click. The six HEX digits are three pairs, red, green and blue, each running from 00 to FF, which is 0 to 255 in RGB.
What is a good color contrast ratio?
For normal body text, WCAG AA asks for at least 4.5:1 between text and background, and AAA asks for 7:1. Large text (24 px, or about 19 px bold) needs 3:1 for AA. Put your two colors into the contrast checker on this page to see the ratio and which levels pass.
How do I check whether colors work for color-blind people?
Use the color vision section on this page. It shows your color as people with protanopia, deuteranopia, tritanopia and achromatopsia see it, and lists nearby colors that would look the same to them. If two states differ only by red versus green, add a shape, icon or label too.
Got an image instead of a hex code?
The image color picker samples any pixel of a photo and pulls out its dominant palette, with the same formats, harmonies and contrast checks waiting on the other side.
Open the image color picker