이름 색상 · #BBD5EF

Summer Birthday

Summer Birthday은(는) #BBD5EF: rgb(187 213 239), hsl(210 62% 84%), oklch(0.862 0.046 248.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Blue mean? → · Summer Birthday color name →

#BBD5EF

oklch(0.862 0.046 248.4)

색상 변환

HEX: #bbd5ef
RGB: rgb(187 213 239)
HSL: hsl(210 62% 84%)
HWB: hwb(210 73% 6%)
OKLCH: oklch(0.862 0.046 248.4)
OKLab: oklab(0.862 -0.017 -0.043)
CIE Lab: lab(83.96 -4.84 -15.89)
LCH: lch(83.96 16.61 253)
CMYK: cmyk(22% 11% 0% 6%)

틴트 · 셰이드 · 톤

틴트

C2D9F1
C9DDF2
CFE2F4
D6E6F6
DDEAF7
E4EEF9
EAF2FA
F1F7FC
F8FBFD

셰이드

A2B9D0
8A9EB1
738394
5C6A78
46515C
323A42
1F242A
0D1014
020203

톤

B5CCE3
AFC3D8
A9BBCD
A3B2C1
9DAAB6
97A1AB
9199A0
8C9095
86888B

색 조화

보색 +180°

BBD5EF
Summer Birthday
E6CDB2
≈ Ginseng Root

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 1.51:1 · APCA Lc 24

Fail

검은색 위

WCAG 13.87:1 · APCA Lc 79

AAA

가장 좋은 글자색: #000000

WCAG 13.87:1 (AAA) · APCA Lc 79

Contrast pairs

코드 스니펫

CSS

:root {
  --summer-birthday: #bbd5ef;
  --summer-birthday-rgb: 187 213 239;
  --summer-birthday-oklch: oklch(0.862 0.046 248.4);
}

.element {
  color: var(--summer-birthday);
  background-color: hsl(210 62% 84%);
  border-color: oklch(0.862 0.046 248.4);
}

Tailwind CSS v4

@theme {
  --color-summer-birthday: #bbd5ef;
  --color-summer-birthday-50: #ecf6ff;
  --color-summer-birthday-100: #dde9f7;
  --color-summer-birthday-200: #c6d6e8;
  --color-summer-birthday-300: #a6bacf;
  --color-summer-birthday-400: #8aa1b9;
  --color-summer-birthday-500: #6f89a4;
  --color-summer-birthday-600: #5e748a;
  --color-summer-birthday-700: #4b5d6f;
  --color-summer-birthday-800: #364452;
  --color-summer-birthday-900: #252f39;
  --color-summer-birthday-950: #131c23;
}

SCSS

$summer-birthday: #bbd5ef;
$summer-birthday-rgb: 187, 213, 239;
$summer-birthday-light: mix(#fff, $summer-birthday, 20%);
$summer-birthday-dark: mix(#000, $summer-birthday, 20%);

.element {
  color: $summer-birthday;
  box-shadow: 0 0 0 2px rgba($summer-birthday, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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