Custom color

#CCB3AD

#CCB3AD
Hue
12°
Sat
23%
Light
74%
Tailwind classstone-400closest

Accessibility

WCAG 2.1 contrast against white and black text — pick the combination that passes for your use case.

AaThe quick brown fox.
1.98White on this color
AA FailAA Large FailAAA Fail
AaThe quick brown fox.
10.62Black on this color
AA PassAA Large PassAAA Pass

Color in use

#CCB3AD applied to common UI primitives — see how it reads in real interfaces.

Buttons
PrimaryOutlineGhost
Badges
ActiveFeaturedLive
Typography

The future of color is bright.

A paragraph with an inline link in #CCB3AD.

Card
Premium Plan

50+ tools, lifetime updates.

Get started
Alert
Heads up — this alert uses #CCB3AD as its accent stripe.
Progress & Input
Search…

Shades & tints

Click any swatch to copy its hex.

Color harmonies

Pairings from the color wheel — click any swatch to explore it.

Complementary

#CCB3AD#ADC6CC

Split complementary

#CCB3AD#ADCCC3#ADB7CC

CSS variables

/* #CCB3AD */
:root {
  --color--ccb3ad: #CCB3AD;
  --color--ccb3ad-rgb: 204, 179, 173;
  --color--ccb3ad-hsl: 12, 23%, 74%;
}

Similar colors

Clam Shell
#D4B6AF
Wafer
#DECBC6
Quicksand
#BD978E
Thatch
#B69D98
Del Rio
#B09A95
Eunry
#CFA39D
Toast
#9A6E61
Brandy Rose
#BB8983
Martini
#AFA09E
Silver Rust
#C9C0BB
Pharlap
#A3807B
Cold Turkey
#CEBABA

Color tools

Convert #CCB3AD to TailwindColor converterGradient generatorColor palettesTailwind colors

Pick this color from any page

Use SuperDev Pro's eyedropper, contrast checker and 50+ dev tools right inside your browser.

Add to Chrome — Free