Named color · #FFEDBC
Sun-Kissed Sands
Sun-Kissed Sands is #FFEDBC: rgb(255 237 188), hsl(44 100% 87%), oklch(0.949 0.066 90.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Sun-Kissed Sands color name →
#FFEDBC
oklch(0.949 0.066 90.3)
Color conversions
- HEX
- #ffedbc
- RGB
- rgb(255 237 188)
- HSL
- hsl(44 100% 87%)
- HWB
- hwb(44 74% 0%)
- OKLCH
- oklch(0.949 0.066 90.3)
- OKLab
- oklab(0.949 0 0.066)
- CIE Lab
- lab(94.32 0.92 26.16)
- LCH
- lch(94.32 26.18 88)
- CMYK
- cmyk(0% 7% 26% 0%)
Tints · Shades · Tones
Tints
- FFEFC3
- FFF1CA
- FFF3D1
- FFF4D7
- FFF6DE
- FFF8E5
- FFFAEB
- FFFCF2
- FFFDF8
Shades
- DECEA3
- BEB08B
- 9E9373
- 80775D
- 635C47
- 484232
- 2E2A1F
- 16140D
- 030302
Tones
- F2E2B6
- E4D6B0
- D7CBAA
- CAC0A4
- BEB59E
- B1AA98
- A4A092
- 98958C
- 8C8A86
Color harmonies
Complementary +180°
- FFEDBC
Sun-Kissed Sands
- E8EEFF
≈ Brilliant White
Analogous -30° +30°
- FFEDBC
Sun-Kissed Sands
- FFEAD9
≈ Flowerbed
- E8F5C4
≈ Snow Flurry
Triadic +120° +240°
- FFEDBC
Sun-Kissed Sands
- CCF7FF
≈ Vaporised
- FFE5FB
≈ Bunny Tail
Split-complementary +150° +210°
- FFEDBC
Sun-Kissed Sands
- DEF1FF
≈ Wizard White
- F1EAFF
≈ Placebo Purple
Tetradic +90° +180° +270°
- FFEDBC
Sun-Kissed Sands
- BEFDF0
≈ Arabica Mint
- E8EEFF
≈ Brilliant White
- FFE7ED
≈ Nosegay
Contrast & accessibility
Ag
FailOn white
WCAG 1.16:1 · APCA Lc 8
Ag
AAAOn black
WCAG 18.09:1 · APCA Lc 97
Best text color: #000000
WCAG 18.09:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--sun-kissed-sands: #ffedbc;
--sun-kissed-sands-rgb: 255 237 188;
--sun-kissed-sands-oklch: oklch(0.949 0.066 90.3);
}
.element {
color: var(--sun-kissed-sands);
background-color: hsl(44 100% 87%);
border-color: oklch(0.949 0.066 90.3);
}Tailwind CSS v4
@theme {
--color-sun-kissed-sands: #ffedbc;
--color-sun-kissed-sands-50: #fcf5e0;
--color-sun-kissed-sands-100: #efe8d0;
--color-sun-kissed-sands-200: #ded4b5;
--color-sun-kissed-sands-300: #c3b791;
--color-sun-kissed-sands-400: #ad9d71;
--color-sun-kissed-sands-500: #978552;
--color-sun-kissed-sands-600: #807046;
--color-sun-kissed-sands-700: #665a37;
--color-sun-kissed-sands-800: #4c4127;
--color-sun-kissed-sands-900: #352d1a;
--color-sun-kissed-sands-950: #201a0b;
}SCSS
$sun-kissed-sands: #ffedbc;
$sun-kissed-sands-rgb: 255, 237, 188;
$sun-kissed-sands-light: mix(#fff, $sun-kissed-sands, 20%);
$sun-kissed-sands-dark: mix(#000, $sun-kissed-sands, 20%);
.element {
color: $sun-kissed-sands;
box-shadow: 0 0 0 2px rgba($sun-kissed-sands, 0.35);
}