Named color · #CDC29D
Inviting Gesture
Inviting Gesture is #CDC29D: rgb(205 194 157), hsl(46 32% 71%), oklch(0.814 0.051 93.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Inviting Gesture color name →
#CDC29D
oklch(0.814 0.051 93.4)
Color conversions
- HEX
- #cdc29d
- RGB
- rgb(205 194 157)
- HSL
- hsl(46 32% 71%)
- HWB
- hwb(46 62% 20%)
- OKLCH
- oklch(0.814 0.051 93.4)
- OKLab
- oklab(0.814 -0.003 0.051)
- CIE Lab
- lab(78.64 -0.36 20.16)
- LCH
- lch(78.64 20.16 91)
- CMYK
- cmyk(0% 5% 23% 20%)
Tints · Shades · Tones
Tints
- D2C8A7
- D7CEB0
- DCD4BA
- E1DAC4
- E6E0CE
- EBE6D7
- F0EDE1
- F5F3EB
- FAF9F5
Shades
- B2A888
- 988F73
- 7E775F
- 66604C
- 4E493A
- 383428
- 232018
- 0F0E09
- 020201
Tones
- C5BB9A
- BDB497
- B5AE95
- ADA792
- A6A08F
- 9E9A8C
- 969389
- 8F8D86
- 878683
Color harmonies
Complementary +180°
- CDC29D
Inviting Gesture
- B7C0E4
≈ Spoiled Rotten
Analogous -30° +30°
- CDC29D
Inviting Gesture
- DABCA0
≈ Holmes Cream
- BBC8A4
≈ Wispy Mint
Triadic +120° +240°
- CDC29D
Inviting Gesture
- 9DCBD6
≈ Soothing Blue
- D7B6D0
≈ Immortal Indigo
Split-complementary +150° +210°
- CDC29D
Inviting Gesture
- A6C7E1
≈ Sea Cliff
- C9BBDE
≈ Sweet Lucid Dreams
Tetradic +90° +180° +270°
- CDC29D
Inviting Gesture
- 9ECDC5
≈ Tareyton
- B7C0E4
≈ Spoiled Rotten
- E0B5BE
≈ Heart’s Content
Contrast & accessibility
Ag
FailOn white
WCAG 1.77:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.79:1 · APCA Lc 70
Best text color: #000000
WCAG 11.79:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--inviting-gesture: #cdc29d;
--inviting-gesture-rgb: 205 194 157;
--inviting-gesture-oklch: oklch(0.814 0.051 93.4);
}
.element {
color: var(--inviting-gesture);
background-color: hsl(46 32% 71%);
border-color: oklch(0.814 0.051 93.4);
}Tailwind CSS v4
@theme {
--color-inviting-gesture: #cdc29d;
--color-inviting-gesture-50: #f9f5e5;
--color-inviting-gesture-100: #ede8d5;
--color-inviting-gesture-200: #dbd5bc;
--color-inviting-gesture-300: #bfb89a;
--color-inviting-gesture-400: #a89e7c;
--color-inviting-gesture-500: #91865f;
--color-inviting-gesture-600: #7b7151;
--color-inviting-gesture-700: #625b40;
--color-inviting-gesture-800: #49422e;
--color-inviting-gesture-900: #322e1f;
--color-inviting-gesture-950: #1e1a0f;
}SCSS
$inviting-gesture: #cdc29d;
$inviting-gesture-rgb: 205, 194, 157;
$inviting-gesture-light: mix(#fff, $inviting-gesture, 20%);
$inviting-gesture-dark: mix(#000, $inviting-gesture, 20%);
.element {
color: $inviting-gesture;
box-shadow: 0 0 0 2px rgba($inviting-gesture, 0.35);
}