이름 색상 · #BFFBFF

Friendly Frost

Friendly Frost은(는) #BFFBFF: rgb(191 251 255), hsl(184 100% 87%), oklch(0.949 0.06 201.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Cyan mean? → · Friendly Frost color name →

#BFFBFF

oklch(0.949 0.06 201.3)

색상 변환

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%)

틴트 · 셰이드 · 톤

틴트

C6FBFF
CDFCFF
D3FCFF
DAFDFF
E0FDFF
E7FEFF
EDFEFF
F3FEFF
F9FFFF

셰이드

A6DADE
8DBABE
759C9E
5E7E80
486163
334648
1F2D2E
0D1516
020303

톤

B9EEF2
B3E1E4
ADD5D7
A6C8CA
A0BCBE
9AB0B1
93A3A4
8D9798
878C8C

색 조화

보색 +180°

BFFBFF
Friendly Frost
FFE8E7
≈ Sheer Rosebud

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 1.13:1 · APCA Lc 0

Fail

검은색 위

WCAG 18.45:1 · APCA Lc 98

AAA

가장 좋은 글자색: #000000

WCAG 18.45:1 (AAA) · APCA Lc 98

Contrast pairs

코드 스니펫

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);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API