Named color · #C9B29C
Practical Beige
Practical Beige is #C9B29C: rgb(201 178 156), hsl(29 29% 70%), oklch(0.777 0.04 65.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Practical Beige color name →
#C9B29C
oklch(0.777 0.04 65.9)
Color conversions
- HEX
- #c9b29c
- RGB
- rgb(201 178 156)
- HSL
- hsl(29 29% 70%)
- HWB
- hwb(29 61% 21%)
- OKLCH
- oklch(0.777 0.04 65.9)
- OKLab
- oklab(0.777 0.016 0.037)
- CIE Lab
- lab(74.14 5.98 14.48)
- LCH
- lch(74.14 15.66 67.6)
- CMYK
- cmyk(0% 11% 22% 21%)
Tints · Shades · Tones
Tints
- CEBAA6
- D4C1AF
- D9C9B9
- DFD0C3
- E4D8CD
- E9E0D7
- EFE7E1
- F4EFEB
- FAF7F5
Shades
- AE9A87
- 958373
- 7C6D5F
- 64574C
- 4C4339
- 362F28
- 221D18
- 0F0C09
- 020101
Tones
- C1AD99
- BAA896
- B3A394
- AB9E91
- A4998E
- 9D948B
- 958F89
- 8E8A86
- 878583
Color harmonies
Complementary +180°
- C9B29C
Practical Beige
- A2BACF
≈ Northern Pond
Analogous -30° +30°
- C9B29C
Practical Beige
- CFAEA5
≈ Lime Hawk Moth
- BEB79A
≈ Distant Valley
Triadic +120° +240°
- C9B29C
Practical Beige
- 9ABFBA
≈ Envisage
- BDB0CC
≈ Pastel Lilac
Split-complementary +150° +210°
- C9B29C
Practical Beige
- 9ABEC7
≈ Rest Assured
- AFB5D1
≈ Hundred Waters
Tetradic +90° +180° +270°
- C9B29C
Practical Beige
- A3BFAC
≈ Spring Reflection
- A2BACF
≈ Northern Pond
- C8ADC1
≈ Winsome Orchid
Contrast & accessibility
Ag
FailOn white
WCAG 2.03:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.33:1 · APCA Lc 63
Best text color: #000000
WCAG 10.33:1 (AAA) · APCA Lc 63
Contrast pairs
Code snippets
CSS
:root {
--practical-beige: #c9b29c;
--practical-beige-rgb: 201 178 156;
--practical-beige-oklch: oklch(0.777 0.04 65.9);
}
.element {
color: var(--practical-beige);
background-color: hsl(29 29% 70%);
border-color: oklch(0.777 0.04 65.9);
}Tailwind CSS v4
@theme {
--color-practical-beige: #c9b29c;
--color-practical-beige-50: #fdf3e9;
--color-practical-beige-100: #f1e6da;
--color-practical-beige-200: #e0d1c2;
--color-practical-beige-300: #c6b4a2;
--color-practical-beige-400: #af9a86;
--color-practical-beige-500: #99816a;
--color-practical-beige-600: #816d5a;
--color-practical-beige-700: #685748;
--color-practical-beige-800: #4d4034;
--color-practical-beige-900: #352c23;
--color-practical-beige-950: #201912;
}SCSS
$practical-beige: #c9b29c;
$practical-beige-rgb: 201, 178, 156;
$practical-beige-light: mix(#fff, $practical-beige, 20%);
$practical-beige-dark: mix(#000, $practical-beige, 20%);
.element {
color: $practical-beige;
box-shadow: 0 0 0 2px rgba($practical-beige, 0.35);
}