Named color · #BFFBFF
Friendly Frost
Friendly Frost is #BFFBFF: rgb(191 251 255), hsl(184 100% 87%), oklch(0.949 0.06 201.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Friendly Frost color name →
#BFFBFF
oklch(0.949 0.06 201.3)
Color conversions
- HEX
- #bffbff
- RGB
- rgb(191 251 255)
- HSL
- hsl(184 100% 87%)
- HWB
- hwb(184 75% 0%)
- OKLCH
- oklch(0.949 0.06 201.3)
- OKLab
- oklab(0.949 -0.056 -0.022)
- CIE Lab
- lab(94.66 -18.83 -8.39)
- LCH
- lch(94.66 20.62 204)
- CMYK
- cmyk(25% 2% 0% 0%)
Tints · Shades · Tones
Tints
- C6FBFF
- CDFCFF
- D3FCFF
- DAFDFF
- E0FDFF
- E7FEFF
- EDFEFF
- F3FEFF
- F9FFFF
Shades
- A6DADE
- 8DBABE
- 759C9E
- 5E7E80
- 486163
- 334648
- 1F2D2E
- 0D1516
- 020303
Tones
- B9EEF2
- B3E1E4
- ADD5D7
- A6C8CA
- A0BCBE
- 9AB0B1
- 93A3A4
- 8D9798
- 878C8C
Color harmonies
Complementary +180°
- BFFBFF
Friendly Frost
- FFE8E7
≈ Sheer Rosebud
Analogous -30° +30°
- BFFBFF
Friendly Frost
- C6FCE9
≈ Arabica Mint
- DBF2FF
≈ Wizard White
Triadic +120° +240°
- BFFBFF
Friendly Frost
- FBE6FF
≈ Soft Lavender
- FFECCA
≈ Provence Creme
Split-complementary +150° +210°
- BFFBFF
Friendly Frost
- FFE6F0
≈ Cherubic
- FFE9DD
≈ Morning Sigh
Tetradic +90° +180° +270°
- BFFBFF
Friendly Frost
- EEEBFF
≈ Placebo Purple
- FFE8E7
≈ Sheer Rosebud
- EFF3C4
≈ Feijoa Flower
Contrast & accessibility
Ag
FailOn white
WCAG 1.13:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.45:1 · APCA Lc 98
Best text color: #000000
WCAG 18.45:1 (AAA) · APCA Lc 98
Contrast pairs
Code snippets
CSS
:root {
--friendly-frost: #bffbff;
--friendly-frost-rgb: 191 251 255;
--friendly-frost-oklch: oklch(0.949 0.06 201.3);
}
.element {
color: var(--friendly-frost);
background-color: hsl(184 100% 87%);
border-color: oklch(0.949 0.06 201.3);
}Tailwind CSS v4
@theme {
--color-friendly-frost: #bffbff;
--color-friendly-frost-50: #e2fbfd;
--color-friendly-frost-100: #d2eef1;
--color-friendly-frost-200: #b7dce0;
--color-friendly-frost-300: #94c1c5;
--color-friendly-frost-400: #73aaad;
--color-friendly-frost-500: #529297;
--color-friendly-frost-600: #467c7f;
--color-friendly-frost-700: #386366;
--color-friendly-frost-800: #27494a;
--color-friendly-frost-900: #1a3334;
--color-friendly-frost-950: #0b1e1f;
}SCSS
$friendly-frost: #bffbff;
$friendly-frost-rgb: 191, 251, 255;
$friendly-frost-light: mix(#fff, $friendly-frost, 20%);
$friendly-frost-dark: mix(#000, $friendly-frost, 20%);
.element {
color: $friendly-frost;
box-shadow: 0 0 0 2px rgba($friendly-frost, 0.35);
}