Named color · #CCC7A1
Floating Lily Pad
Floating Lily Pad is #CCC7A1: rgb(204 199 161), hsl(53 30% 72%), oklch(0.824 0.051 101.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Floating Lily Pad color name →
#CCC7A1
oklch(0.824 0.051 101.2)
Color conversions
- HEX
- #ccc7a1
- RGB
- rgb(204 199 161)
- HSL
- hsl(53 30% 72%)
- HWB
- hwb(53 63% 20%)
- OKLCH
- oklch(0.824 0.051 101.2)
- OKLab
- oklab(0.824 -0.01 0.05)
- CIE Lab
- lab(79.92 -2.78 19.78)
- LCH
- lch(79.92 19.97 98)
- CMYK
- cmyk(0% 2% 21% 20%)
Tints · Shades · Tones
Tints
- D1CDAA
- D6D2B4
- DBD8BD
- E0DDC6
- E5E3D0
- EAE8D9
- EFEEE3
- F5F4EC
- FAF9F5
Shades
- B1AD8B
- 979376
- 7E7A62
- 65624E
- 4E4C3C
- 37362A
- 222119
- 0F0E09
- 020201
Tones
- C4C09E
- BCB89B
- B4B197
- ADAA94
- A5A391
- 9E9C8E
- 96958A
- 8F8E87
- 878783
Color harmonies
Complementary +180°
- CCC7A1
Floating Lily Pad
- BFC2E7
≈ Canterbury Bells
Analogous -30° +30°
- CCC7A1
Floating Lily Pad
- DBC0A2
≈ Shrimp Boudin
- BACDAA
≈ Enamel Green
Triadic +120° +240°
- CCC7A1
Floating Lily Pad
- A1CEDD
≈ Intercoastal
- DEB9CF
≈ Smoked Silver
Split-complementary +150° +210°
- CCC7A1
Floating Lily Pad
- AEC8E6
≈ Water Wash
- D0BDDE
≈ Plum Point
Tetradic +90° +180° +270°
- CCC7A1
Floating Lily Pad
- 9FD1CD
≈ Cold Turquoise
- BFC2E7
≈ Canterbury Bells
- E4B8BD
≈ Seven Veils
Contrast & accessibility
Ag
FailOn white
WCAG 1.71:1 · APCA Lc 31
Ag
AAAOn black
WCAG 12.25:1 · APCA Lc 72
Best text color: #000000
WCAG 12.25:1 (AAA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--floating-lily-pad: #ccc7a1;
--floating-lily-pad-rgb: 204 199 161;
--floating-lily-pad-oklch: oklch(0.824 0.051 101.2);
}
.element {
color: var(--floating-lily-pad);
background-color: hsl(53 30% 72%);
border-color: oklch(0.824 0.051 101.2);
}Tailwind CSS v4
@theme {
--color-floating-lily-pad: #ccc7a1;
--color-floating-lily-pad-50: #f7f6e6;
--color-floating-lily-pad-100: #ebe9d6;
--color-floating-lily-pad-200: #d8d6bd;
--color-floating-lily-pad-300: #bcb99b;
--color-floating-lily-pad-400: #a4a07d;
--color-floating-lily-pad-500: #8d8860;
--color-floating-lily-pad-600: #777352;
--color-floating-lily-pad-700: #5f5c41;
--color-floating-lily-pad-800: #47432e;
--color-floating-lily-pad-900: #312e1f;
--color-floating-lily-pad-950: #1d1b0f;
}SCSS
$floating-lily-pad: #ccc7a1;
$floating-lily-pad-rgb: 204, 199, 161;
$floating-lily-pad-light: mix(#fff, $floating-lily-pad, 20%);
$floating-lily-pad-dark: mix(#000, $floating-lily-pad, 20%);
.element {
color: $floating-lily-pad;
box-shadow: 0 0 0 2px rgba($floating-lily-pad, 0.35);
}