Named color · #C4D3E5
Surf’s Surprise
Surf’s Surprise is #C4D3E5: rgb(196 211 229), hsl(213 39% 83%), oklch(0.861 0.03 253). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Surf’s Surprise color name →
#C4D3E5
oklch(0.861 0.03 253)
Color conversions
- HEX
- #c4d3e5
- RGB
- rgb(196 211 229)
- HSL
- hsl(213 39% 83%)
- HWB
- hwb(213 77% 10%)
- OKLCH
- oklch(0.861 0.03 253)
- OKLab
- oklab(0.861 -0.009 -0.029)
- CIE Lab
- lab(83.83 -2.54 -10.73)
- LCH
- lch(83.83 11.03 256.7)
- CMYK
- cmyk(14% 8% 0% 10%)
Tints · Shades · Tones
Tints
- CAD7E8
- D0DCEA
- D5E0ED
- DBE4EF
- E1E9F2
- E7EDF5
- EDF2F7
- F3F6FA
- F9FBFC
Shades
- AAB7C7
- 919CAA
- 78828E
- 616972
- 4A5158
- 353A3F
- 212428
- 0E1012
- 020203
Tones
- BDCADA
- B6C2D0
- AFB9C6
- A8B1BB
- A1A9B1
- 9BA0A7
- 94989D
- 8D9093
- 87888A
Color harmonies
Complementary +180°
- C4D3E5
Surf’s Surprise
- DECFBC
≈ Dainty Lace
Analogous -30° +30°
- C4D3E5
Surf’s Surprise
- BDD6E0
≈ Bridgewater Bay
- CECFE5
≈ Wildflower Prairie
Triadic +120° +240°
- C4D3E5
Surf’s Surprise
- E4CACC
≈ Pink Spinel
- CAD6C2
≈ French Limestone
Split-complementary +150° +210°
- C4D3E5
Surf’s Surprise
- E3CCC2
≈ Pout
- D4D3BC
≈ Barest Celadon
Tetradic +90° +180° +270°
- C4D3E5
Surf’s Surprise
- E0CAD6
≈ Lilac Lane
- DECFBC
≈ Dainty Lace
- C1D8CC
≈ Silverton
Contrast & accessibility
Ag
FailOn white
WCAG 1.52:1 · APCA Lc 24
Ag
AAAOn black
WCAG 13.79:1 · APCA Lc 79
Best text color: #000000
WCAG 13.79:1 (AAA) · APCA Lc 79
Contrast pairs
Code snippets
CSS
:root {
--surf-s-surprise: #c4d3e5;
--surf-s-surprise-rgb: 196 211 229;
--surf-s-surprise-oklch: oklch(0.861 0.03 253);
}
.element {
color: var(--surf-s-surprise);
background-color: hsl(213 39% 83%);
border-color: oklch(0.861 0.03 253);
}Tailwind CSS v4
@theme {
--color-surf-s-surprise: #c4d3e5;
--color-surf-s-surprise-50: #f0f6fe;
--color-surf-s-surprise-100: #e1e9f2;
--color-surf-s-surprise-200: #ccd5e1;
--color-surf-s-surprise-300: #adb8c7;
--color-surf-s-surprise-400: #92a0b0;
--color-surf-s-surprise-500: #79889a;
--color-surf-s-surprise-600: #667382;
--color-surf-s-surprise-700: #525c68;
--color-surf-s-surprise-800: #3b434d;
--color-surf-s-surprise-900: #282e35;
--color-surf-s-surprise-950: #161b20;
}SCSS
$surf-s-surprise: #c4d3e5;
$surf-s-surprise-rgb: 196, 211, 229;
$surf-s-surprise-light: mix(#fff, $surf-s-surprise, 20%);
$surf-s-surprise-dark: mix(#000, $surf-s-surprise, 20%);
.element {
color: $surf-s-surprise;
box-shadow: 0 0 0 2px rgba($surf-s-surprise, 0.35);
}