Named color · #C9E5EE
Sapphireberry
Sapphireberry is #C9E5EE: rgb(201 229 238), hsl(195 52% 86%), oklch(0.904 0.032 219.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Sapphireberry color name →
#C9E5EE
oklch(0.904 0.032 219.1)
Color conversions
- HEX
- #c9e5ee
- RGB
- rgb(201 229 238)
- HSL
- hsl(195 52% 86%)
- HWB
- hwb(195 79% 7%)
- OKLCH
- oklch(0.904 0.032 219.1)
- OKLab
- oklab(0.904 -0.025 -0.02)
- CIE Lab
- lab(89.09 -8.18 -7.67)
- LCH
- lch(89.09 11.21 223.2)
- CMYK
- cmyk(16% 4% 0% 7%)
Tints · Shades · Tones
Tints
- CEE8F0
- D4EAF1
- D9EDF3
- DFEFF5
- E4F2F7
- E9F5F8
- EFF7FA
- F4FAFC
- FAFCFD
Shades
- AEC7CF
- 95AAB1
- 7C8E93
- 647277
- 4C585C
- 363F42
- 22282A
- 0F1214
- 020303
Tones
- C2DAE2
- BAD0D7
- B3C6CC
- ABBBC1
- A4B1B5
- 9DA7AB
- 959DA0
- 8E9395
- 878A8A
Color harmonies
Complementary +180°
- C9E5EE
Sapphireberry
- F3D9D0
≈ Possibly Pink
Analogous -30° +30°
- C9E5EE
Sapphireberry
- C8E7E4
≈ Polar Expedition
- D0E2F4
≈ Weathered Blue
Triadic +120° +240°
- C9E5EE
Sapphireberry
- EFD8E6
≈ All Made Up
- E4E0C8
≈ Egg Wash
Split-complementary +150° +210°
- C9E5EE
Sapphireberry
- F4D7DB
≈ Eliza Jane
- EEDCC9
≈ Almond
Tetradic +90° +180° +270°
- C9E5EE
Sapphireberry
- E6DAF0
≈ Pouty Purple
- F3D9D0
≈ Possibly Pink
- D9E4CE
≈ Infinitesimal Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.31:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.92:1 · APCA Lc 88
Best text color: #000000
WCAG 15.92:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--sapphireberry: #c9e5ee;
--sapphireberry-rgb: 201 229 238;
--sapphireberry-oklch: oklch(0.904 0.032 219.1);
}
.element {
color: var(--sapphireberry);
background-color: hsl(195 52% 86%);
border-color: oklch(0.904 0.032 219.1);
}Tailwind CSS v4
@theme {
--color-sapphireberry: #c9e5ee;
--color-sapphireberry-50: #ecf7fc;
--color-sapphireberry-100: #ddebef;
--color-sapphireberry-200: #c6d8de;
--color-sapphireberry-300: #a6bcc3;
--color-sapphireberry-400: #8aa3ab;
--color-sapphireberry-500: #6f8c95;
--color-sapphireberry-600: #5e767e;
--color-sapphireberry-700: #4b5f65;
--color-sapphireberry-800: #36454a;
--color-sapphireberry-900: #253033;
--color-sapphireberry-950: #131c1f;
}SCSS
$sapphireberry: #c9e5ee;
$sapphireberry-rgb: 201, 229, 238;
$sapphireberry-light: mix(#fff, $sapphireberry, 20%);
$sapphireberry-dark: mix(#000, $sapphireberry, 20%);
.element {
color: $sapphireberry;
box-shadow: 0 0 0 2px rgba($sapphireberry, 0.35);
}