Named color · #F4D1C2
Sand Island
Sand Island is #F4D1C2: rgb(244 209 194), hsl(18 69% 86%), oklch(0.886 0.044 44.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Sand Island color name →
#F4D1C2
oklch(0.886 0.044 44.5)
Color conversions
- HEX
- #f4d1c2
- RGB
- rgb(244 209 194)
- HSL
- hsl(18 69% 86%)
- HWB
- hwb(18 76% 4%)
- OKLCH
- oklch(0.886 0.044 44.5)
- OKLab
- oklab(0.886 0.032 0.031)
- CIE Lab
- lab(86.56 10.97 12.25)
- LCH
- lch(86.56 16.44 48.1)
- CMYK
- cmyk(0% 14% 20% 4%)
Tints · Shades · Tones
Tints
- F5D6C8
- F6DACE
- F8DFD4
- F9E3DA
- FAE8E0
- FBEDE6
- FCF1ED
- FDF6F3
- FEFAF9
Shades
- D4B5A8
- B59B8F
- 978177
- 7A6860
- 5E5049
- 443934
- 2B2320
- 14100E
- 030202
Tones
- E8C9BB
- DCC0B4
- D0B8AE
- C4B0A7
- B9A8A1
- ADA09A
- A29893
- 96908D
- 8B8886
Color harmonies
Complementary +180°
- F4D1C2
Sand Island
- BBE1F0
≈ Diminished Blue
Analogous -30° +30°
- F4D1C2
Sand Island
- F6CED0
≈ Strawberry Ripple
- EBD6BA
≈ Nevada Sand
Triadic +120° +240°
- F4D1C2
Sand Island
- C0E3D2
≈ Beru
- D6D6F7
≈ Flax Bloom
Split-complementary +150° +210°
- F4D1C2
Sand Island
- B8E3E2
≈ Seascape Green
- C6DCF7
≈ Fly a Kite
Tetradic +90° +180° +270°
- F4D1C2
Sand Island
- CDE1C3
≈ Soft Moss
- BBE1F0
≈ Diminished Blue
- E5D1EE
≈ Lavender Princess
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.74:1 · APCA Lc 83
Best text color: #000000
WCAG 14.74:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--sand-island: #f4d1c2;
--sand-island-rgb: 244 209 194;
--sand-island-oklch: oklch(0.886 0.044 44.5);
}
.element {
color: var(--sand-island);
background-color: hsl(18 69% 86%);
border-color: oklch(0.886 0.044 44.5);
}Tailwind CSS v4
@theme {
--color-sand-island: #f4d1c2;
--color-sand-island-50: #fff2eb;
--color-sand-island-100: #f5e4dc;
--color-sand-island-200: #e5cfc5;
--color-sand-island-300: #ccb1a5;
--color-sand-island-400: #b69789;
--color-sand-island-500: #a07d6e;
--color-sand-island-600: #876a5d;
--color-sand-island-700: #6c554b;
--color-sand-island-800: #503e36;
--color-sand-island-900: #382a25;
--color-sand-island-950: #221814;
}SCSS
$sand-island: #f4d1c2;
$sand-island-rgb: 244, 209, 194;
$sand-island-light: mix(#fff, $sand-island, 20%);
$sand-island-dark: mix(#000, $sand-island, 20%);
.element {
color: $sand-island;
box-shadow: 0 0 0 2px rgba($sand-island, 0.35);
}