Named color · #E7EFFB
Cotton Boll
Cotton Boll is #E7EFFB: rgb(231 239 251), hsl(216 71% 95%), oklch(0.95 0.018 258.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Cotton Boll color name →
#E7EFFB
oklch(0.95 0.018 258.4)
Color conversions
- HEX
- #e7effb
- RGB
- rgb(231 239 251)
- HSL
- hsl(216 71% 95%)
- HWB
- hwb(216 91% 2%)
- OKLCH
- oklch(0.95 0.018 258.4)
- OKLab
- oklab(0.95 -0.004 -0.018)
- CIE Lab
- lab(94.1 -1.08 -6.78)
- LCH
- lch(94.1 6.86 261)
- CMYK
- cmyk(8% 5% 0% 2%)
Tints · Shades · Tones
Tints
- E9F1FB
- ECF2FC
- EEF4FC
- F1F5FD
- F3F7FD
- F5F9FD
- F8FAFE
- FAFCFE
- FDFDFF
Shades
- C9D0DA
- ABB1BA
- 8F949C
- 73787E
- 595C61
- 404246
- 282A2D
- 131415
- 030303
Tones
- DCE3EE
- D2D8E1
- C7CCD5
- BCC1C8
- B2B6BC
- A8ABAF
- 9EA0A3
- 949597
- 8A8B8C
Color harmonies
Complementary +180°
- E7EFFB
Cotton Boll
- F5EDE1
≈ White Flour
Analogous -30° +30°
- E7EFFB
Cotton Boll
- E2F1F8
≈ Clear Vision
- EDEDFA
≈ Carte Blanche
Triadic +120° +240°
- E7EFFB
Cotton Boll
- FBEAEA
≈ Ballerina Gown
- E8F2E6
≈ Quark White
Split-complementary +150° +210°
- E7EFFB
Cotton Boll
- F9EBE4
≈ Light Rose Beige
- EFF0E2
≈ Frostwork
Tetradic +90° +180° +270°
- E7EFFB
Cotton Boll
- F9EAF0
≈ Morning Shine
- F5EDE1
≈ White Flour
- E3F3EC
≈ Bath Bubbles
Contrast & accessibility
Ag
FailOn white
WCAG 1.15:1 · APCA Lc 7
Ag
AAAOn black
WCAG 18.13:1 · APCA Lc 97
Best text color: #000000
WCAG 18.13:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--cotton-boll: #e7effb;
--cotton-boll-rgb: 231 239 251;
--cotton-boll-oklch: oklch(0.95 0.018 258.4);
}
.element {
color: var(--cotton-boll);
background-color: hsl(216 71% 95%);
border-color: oklch(0.95 0.018 258.4);
}Tailwind CSS v4
@theme {
--color-cotton-boll: #e7effb;
--color-cotton-boll-50: #f2f5fa;
--color-cotton-boll-100: #e4e8ee;
--color-cotton-boll-200: #d0d4dc;
--color-cotton-boll-300: #b2b8c1;
--color-cotton-boll-400: #989fa9;
--color-cotton-boll-500: #7f8793;
--color-cotton-boll-600: #6b727c;
--color-cotton-boll-700: #565b63;
--color-cotton-boll-800: #3e4349;
--color-cotton-boll-900: #2b2e32;
--color-cotton-boll-950: #181b1e;
}SCSS
$cotton-boll: #e7effb;
$cotton-boll-rgb: 231, 239, 251;
$cotton-boll-light: mix(#fff, $cotton-boll, 20%);
$cotton-boll-dark: mix(#000, $cotton-boll, 20%);
.element {
color: $cotton-boll;
box-shadow: 0 0 0 2px rgba($cotton-boll, 0.35);
}