Named color · #C8B960
Almond Puff
Almond Puff is #C8B960: rgb(200 185 96), hsl(51 49% 58%), oklch(0.78 0.112 99.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Almond Puff color name →
#C8B960
oklch(0.78 0.112 99.9)
Color conversions
- HEX
- #c8b960
- RGB
- rgb(200 185 96)
- HSL
- hsl(51 49% 58%)
- HWB
- hwb(51 38% 22%)
- OKLCH
- oklch(0.78 0.112 99.9)
- OKLab
- oklab(0.78 -0.019 0.11)
- CIE Lab
- lab(75.04 -3.02 46.59)
- LCH
- lch(75.04 46.69 93.7)
- CMYK
- cmyk(0% 8% 52% 22%)
Tints · Shades · Tones
Tints
- CDC072
- D3C782
- D8CE93
- DDD5A2
- E3DCB2
- E8E3C2
- EEEAD1
- F4F1E0
- F9F8F0
Shades
- AEA052
- 948945
- 7B7138
- 635B2C
- 4C4620
- 363115
- 211E0A
- 0F0D03
- 020200
Tones
- C0B365
- B9AE6A
- B2A86E
- AAA271
- A39D75
- 9C9777
- 95917A
- 8E8B7C
- 87867E
Color harmonies
Complementary +180°
- C8B960
Almond Puff
- A9AFFE
≈ Shy Moment
Analogous -30° +30°
- C8B960
Almond Puff
- E5AA64
≈ Sahara Shade
- A0C678
≈ Opaline Green
Triadic +120° +240°
- C8B960
Almond Puff
- 56C8E9
≈ Candid Blue
- E79BCE
≈ Blossoms in Spring
Split-complementary +150° +210°
- C8B960
Almond Puff
- 7EBDFC
≈ Cooler Than Ever
- CDA3ED
≈ Bright Ube
Tetradic +90° +180° +270°
- C8B960
Almond Puff
- 4ECEC7
≈ May Day
- A9AFFE
≈ Shy Moment
- F599A7
≈ Flower Girl
Contrast & accessibility
Ag
FailOn white
WCAG 1.98:1 · APCA Lc 38
Ag
AAAOn black
WCAG 10.56:1 · APCA Lc 64
Best text color: #000000
WCAG 10.56:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--almond-puff: #c8b960;
--almond-puff-rgb: 200 185 96;
--almond-puff-oklch: oklch(0.78 0.112 99.9);
}
.element {
color: var(--almond-puff);
background-color: hsl(51 49% 58%);
border-color: oklch(0.78 0.112 99.9);
}Tailwind CSS v4
@theme {
--color-almond-puff: #c8b960;
--color-almond-puff-50: #fbf7d3;
--color-almond-puff-100: #efeabf;
--color-almond-puff-200: #ddd79f;
--color-almond-puff-300: #c3ba75;
--color-almond-puff-400: #aea04c;
--color-almond-puff-500: #988716;
--color-almond-puff-600: #807217;
--color-almond-puff-700: #675b13;
--color-almond-puff-800: #4d420a;
--color-almond-puff-900: #352e06;
--color-almond-puff-950: #211a00;
}SCSS
$almond-puff: #c8b960;
$almond-puff-rgb: 200, 185, 96;
$almond-puff-light: mix(#fff, $almond-puff, 20%);
$almond-puff-dark: mix(#000, $almond-puff, 20%);
.element {
color: $almond-puff;
box-shadow: 0 0 0 2px rgba($almond-puff, 0.35);
}