이름 색상 · #64B6E2
Sea Frolic
Sea Frolic은(는) #64B6E2: rgb(100 182 226), hsl(201 68% 64%), oklch(0.741 0.102 233.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Sea Frolic color name →
#64B6E2
oklch(0.741 0.102 233.9)
색상 변환
- HEX
- #64b6e2
- RGB
- rgb(100 182 226)
- HSL
- hsl(201 68% 64%)
- HWB
- hwb(201 39% 11%)
- OKLCH
- oklch(0.741 0.102 233.9)
- OKLab
- oklab(0.741 -0.06 -0.083)
- CIE Lab
- lab(70.16 -16.59 -30.32)
- LCH
- lch(70.16 34.56 241.3)
- CMYK
- cmyk(56% 19% 0% 11%)
틴트 · 셰이드 · 톤
틴트
- 75BDE5
- 86C5E8
- 96CCEB
- A5D4EF
- B4DBF1
- C3E2F4
- D2E9F7
- E1F1FA
- F0F8FC
셰이드
- 569EC4
- 4886A8
- 3B6F8C
- 2E5971
- 224457
- 16303E
- 0B1D27
- 030C12
- 000203
톤
- 69B1D8
- 6DABCE
- 71A6C4
- 74A1BA
- 779BB0
- 7996A7
- 7B909D
- 7D8B93
- 7F868A
색 조화
보색 +180°
- 64B6E2
Sea Frolic
- DE996C
≈ Candle Yellow
유사색 -30° +30°
- 64B6E2
Sea Frolic
- 4CBEC9
≈ Water Sports
- 8AABEC
≈ Kitten’s Eye
삼각 배색 +120° +240°
- 64B6E2
Sea Frolic
- DE90B0
≈ Rosebloom
- AAB365
≈ April Green
분열 보색 +150° +210°
- 64B6E2
Sea Frolic
- E5918C
≈ Strawberry Memory
- CAA65C
≈ Excitable
사각 배색 +90° +180° +270°
- 64B6E2
Sea Frolic
- CB95D0
≈ Ineffable Magenta
- DE996C
≈ Candle Yellow
- 83BC82
≈ Greengage
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.25:1 · APCA Lc 44
Ag
AAA검은색 위
WCAG 9.33:1 · APCA Lc 58
가장 좋은 글자색: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
코드 스니펫
CSS
:root {
--sea-frolic: #64b6e2;
--sea-frolic-rgb: 100 182 226;
--sea-frolic-oklch: oklch(0.741 0.102 233.9);
}
.element {
color: var(--sea-frolic);
background-color: hsl(201 68% 64%);
border-color: oklch(0.741 0.102 233.9);
}Tailwind CSS v4
@theme {
--color-sea-frolic: #64b6e2;
--color-sea-frolic-50: #dafbff;
--color-sea-frolic-100: #c8eeff;
--color-sea-frolic-200: #abdcfb;
--color-sea-frolic-300: #83c0e5;
--color-sea-frolic-400: #5ca8d2;
--color-sea-frolic-500: #2f91bf;
--color-sea-frolic-600: #2a7aa1;
--color-sea-frolic-700: #216282;
--color-sea-frolic-800: #144860;
--color-sea-frolic-900: #0d3243;
--color-sea-frolic-950: #011e2b;
}SCSS
$sea-frolic: #64b6e2;
$sea-frolic-rgb: 100, 182, 226;
$sea-frolic-light: mix(#fff, $sea-frolic, 20%);
$sea-frolic-dark: mix(#000, $sea-frolic, 20%);
.element {
color: $sea-frolic;
box-shadow: 0 0 0 2px rgba($sea-frolic, 0.35);
}