이름 색상 · #17569B
Sonic Blue
Sonic Blue은(는) #17569B: rgb(23 86 155), hsl(211 74% 35%), oklch(0.453 0.128 254.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Sonic Blue color name →
#17569B
oklch(0.453 0.128 254.3)
색상 변환
- HEX
- #17569b
- RGB
- rgb(23 86 155)
- HSL
- hsl(211 74% 35%)
- HWB
- hwb(211 9% 39%)
- OKLCH
- oklch(0.453 0.128 254.3)
- OKLab
- oklab(0.453 -0.035 -0.123)
- CIE Lab
- lab(35.69 0.99 -43.98)
- LCH
- lch(35.69 43.99 271.3)
- CMYK
- cmyk(85% 45% 0% 39%)
틴트 · 셰이드 · 톤
틴트
- 3267A6
- 4977B0
- 5F88BB
- 7599C5
- 8BA9CF
- A2BAD9
- B9CBE2
- D0DCEC
- E7EEF6
셰이드
- 124A86
- 0E3E72
- 0A325E
- 06274B
- 041C39
- 021228
- 010818
- 000209
- 000001
톤
- 265B99
- 326097
- 3D6494
- 476992
- 516D90
- 5B718D
- 64758A
- 6D7987
- 777C84
색 조화
보색 +180°
- 17569B
Sonic Blue
- 754D00
≈ Lucky Brown
유사색 -30° +30°
- 17569B
Sonic Blue
- 006079
≈ Blue-Collar
- 50489A
≈ Liberty
삼각 배색 +120° +240°
- 17569B
Sonic Blue
- 8F3040
≈ Tibetan Red
- 356404
≈ Keen Green
분열 보색 +150° +210°
- 17569B
Sonic Blue
- 8D3805
≈ Espresso Martini
- 5F5800
≈ Ayahuasca Vine
사각 배색 +90° +180° +270°
- 17569B
Sonic Blue
- 853367
≈ Boysenberry
- 754D00
≈ Lucky Brown
- 006648
≈ Aotake Bamboo
대비 및 접근성
Ag
AAA흰색 위
WCAG 7.39:1 · APCA Lc 85
Ag
Fail검은색 위
WCAG 2.84:1 · APCA Lc 17
가장 좋은 글자색: #FFFFFF
WCAG 7.39:1 (AAA) · APCA Lc 85
Contrast pairs
코드 스니펫
CSS
:root {
--sonic-blue: #17569b;
--sonic-blue-rgb: 23 86 155;
--sonic-blue-oklch: oklch(0.453 0.128 254.3);
}
.element {
color: var(--sonic-blue);
background-color: hsl(211 74% 35%);
border-color: oklch(0.453 0.128 254.3);
}Tailwind CSS v4
@theme {
--color-sonic-blue: #17569b;
--color-sonic-blue-50: #def7ff;
--color-sonic-blue-100: #cdeaff;
--color-sonic-blue-200: #b1d7ff;
--color-sonic-blue-300: #8cbaf9;
--color-sonic-blue-400: #67a1e9;
--color-sonic-blue-500: #4488d9;
--color-sonic-blue-600: #3a73b7;
--color-sonic-blue-700: #2e5c93;
--color-sonic-blue-800: #1d446d;
--color-sonic-blue-900: #132f4d;
--color-sonic-blue-950: #051b33;
}SCSS
$sonic-blue: #17569b;
$sonic-blue-rgb: 23, 86, 155;
$sonic-blue-light: mix(#fff, $sonic-blue, 20%);
$sonic-blue-dark: mix(#000, $sonic-blue, 20%);
.element {
color: $sonic-blue;
box-shadow: 0 0 0 2px rgba($sonic-blue, 0.35);
}