Named color · #F6F3E7
Rapture’s Light
Rapture’s Light is #F6F3E7: rgb(246 243 231), hsl(48 45% 94%), oklch(0.963 0.016 95.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Rapture’s Light color name →
#F6F3E7
oklch(0.963 0.016 95.2)
Color conversions
- HEX
- #f6f3e7
- RGB
- rgb(246 243 231)
- HSL
- hsl(48 45% 94%)
- HWB
- hwb(48 91% 4%)
- OKLCH
- oklch(0.963 0.016 95.2)
- OKLab
- oklab(0.963 -0.001 0.016)
- CIE Lab
- lab(95.83 -0.49 6.18)
- LCH
- lch(95.83 6.2 94.5)
- CMYK
- cmyk(0% 1% 6% 4%)
Tints · Shades · Tones
Tints
- F7F4E9
- F8F5EC
- F9F7EE
- FAF8F1
- FAF9F3
- FBFAF5
- FCFBF8
- FDFDFA
- FEFEFD
Shades
- D6D3C9
- B7B4AB
- 98978F
- 7B7A73
- 5F5E59
- 454440
- 2C2B28
- 151413
- 030303
Tones
- EAE7DC
- DDDBD2
- D1CFC7
- C5C3BD
- B9B8B2
- ADACA8
- A2A19E
- 969694
- 8B8B8A
Color harmonies
Complementary +180°
- F6F3E7
Rapture’s Light
- EFF2FE
≈ Placebo Blue
Analogous -30° +30°
- F6F3E7
Rapture’s Light
- FBF1E8
≈ Linen
- F0F5E9
≈ Calcium
Triadic +120° +240°
- F6F3E7
Rapture’s Light
- E7F6FA
≈ Clear Skies
- FAEFF7
≈ Sentimental Pink
Split-complementary +150° +210°
- F6F3E7
Rapture’s Light
- EAF4FD
≈ Moon White
- F5F0FC
≈ Cloud Break
Tetradic +90° +180° +270°
- F6F3E7
Rapture’s Light
- E8F7F4
≈ Melting Glacier
- EFF2FE
≈ Placebo Blue
- FDEFF1
≈ Pale Cherry Blossom
Contrast & accessibility
Ag
FailOn white
WCAG 1.11:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.89:1 · APCA Lc 100
Best text color: #000000
WCAG 18.89:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--rapture-s-light: #f6f3e7;
--rapture-s-light-rgb: 246 243 231;
--rapture-s-light-oklch: oklch(0.963 0.016 95.2);
}
.element {
color: var(--rapture-s-light);
background-color: hsl(48 45% 94%);
border-color: oklch(0.963 0.016 95.2);
}Tailwind CSS v4
@theme {
--color-rapture-s-light: #f6f3e7;
--color-rapture-s-light-50: #f6f5f0;
--color-rapture-s-light-100: #e9e8e2;
--color-rapture-s-light-200: #d6d4cd;
--color-rapture-s-light-300: #b9b8ae;
--color-rapture-s-light-400: #a19e94;
--color-rapture-s-light-500: #89867a;
--color-rapture-s-light-600: #747268;
--color-rapture-s-light-700: #5d5b53;
--color-rapture-s-light-800: #44423c;
--color-rapture-s-light-900: #2f2e29;
--color-rapture-s-light-950: #1c1b17;
}SCSS
$rapture-s-light: #f6f3e7;
$rapture-s-light-rgb: 246, 243, 231;
$rapture-s-light-light: mix(#fff, $rapture-s-light, 20%);
$rapture-s-light-dark: mix(#000, $rapture-s-light, 20%);
.element {
color: $rapture-s-light;
box-shadow: 0 0 0 2px rgba($rapture-s-light, 0.35);
}