#cca684

Color #cca684

A moderately saturated light orange.

Closest named color Tan #d2b48c · ΔE 6.15 Nearest Tailwind class orange-300 #ffb86a · ΔE 12.2

Open in Palette generator Color wheel Color mixer Contrast checker Blindness simulator Gradient

Conversions

HEX

#cca684

RGB

rgb(204, 166, 132)

HSL

hsl(28.3, 41.4%, 65.9%)

HSV / HSB

hsv(28.3, 35.3%, 80%)

CMYK

cmyk(0%, 18.6%, 35.3%, 20%)

LAB

lab(70.72, 9.17, 22.88)

LCH

lch(70.72, 24.65, 68.16)

OKLCH

oklch(75.1%, 0.0645, 63.4)

HWB

hwb(28.3, 51.8%, 20%)

Harmony colors

Complementary

#84aacc

Analogous

#cc8486

#cca684

#ccca84

Triadic

#cca684

#84cca6

#a684cc

Split-complementary

#cca684

#84ccca

#8486cc

Tetradic

#cca684

#aacc84

#84aacc

#a684cc

Square

#cca684

#86cc84

#84aacc

#ca84cc

Shades

Color #cca684 mixed toward black.

#bc895c

#9e6d42

#775231

#4f3721

#281b10

Tints

Color #cca684 mixed toward white.

#d5b599

#ddc4ad

#e6d3c2

#eee1d6

#f7f0eb

Tones

Color #cca684 mixed toward gray.

#c6a68a

#c0a790

#baa796

#b4a79c

#aea8a2

Accessibility

Aa White text on this color

2.24:1

Aa Black text on this color

9.36:1

Black text reads better on this background (9.36:1). That passes WCAG AAA (≥7:1) for normal-size text.

Under color vision deficiencies

Protanopia

#bdbc8d · ΔE 15.8

Deuteranopia

#bfc28f · ΔE 17.5

Tritanopia

#ca9495 · ΔE 16.5

Achromatopsia

#adadad · ΔE 16.6

Left half is the original, right half is the simulated appearance. See all 8 vision types →

Code

CSS

background-color: #cca684;

Tailwind (arbitrary value)

bg-[#cca684]

Related colors

Peach Puff #ffdab9

Sandy Brown #f4a460

Peru #cd853f

Linen #faf0e6

Chocolate #d2691e

Saddle Brown #8b4513

Frequently asked questions

#cca684 (#cca684) is rgb(204, 166, 132) in RGB.

No, #cca684 is not web-safe. The nearest web-safe colors are among its tones and shades below.

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Build something with this color

Generate a full palette from #cca684, or check how it holds up for accessibility.

Generate a palette → Check contrast