이름 색상 · #6488EA
Soft Blue
Soft Blue은(는) #6488EA: rgb(100 136 234), hsl(224 76% 65%), oklch(0.646 0.152 266.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Soft Blue color name →
#6488EA
oklch(0.646 0.152 266.9)
색상 변환
- HEX
- #6488ea
- RGB
- rgb(100 136 234)
- HSL
- hsl(224 76% 65%)
- HWB
- hwb(224 39% 8%)
- OKLCH
- oklch(0.646 0.152 266.9)
- OKLab
- oklab(0.646 -0.008 -0.152)
- CIE Lab
- lab(57.53 9.39 -54.38)
- LCH
- lch(57.53 55.19 279.8)
- CMYK
- cmyk(57% 42% 0% 8%)
틴트 · 셰이드 · 톤
틴트
- 7294ED
- 81A1F0
- 90ADF3
- 9FB9F5
- AFC4F7
- BED0F9
- CEDCFB
- DEE8FD
- EFF3FE
셰이드
- 5675CB
- 4863AE
- 3B5291
- 2E4175
- 22315A
- 162241
- 0B1329
- 030613
- 000103
톤
- 6788E0
- 6A88D5
- 6D87CB
- 6F87C0
- 7286B6
- 7585AB
- 7884A1
- 7B8396
- 7D818B
색 조화
보색 +180°
- 6488EA
Soft Blue
- B08700
≈ Yellow Brown
유사색 -30° +30°
- 6488EA
Soft Blue
- 0099D8
≈ Bayern Blue
- 9977DE
≈ Matt Purple
삼각 배색 +120° +240°
- 6488EA
Soft Blue
- DB6359
≈ Salami Slice
- 41A653
≈ Fruit Salad
분열 보색 +150° +210°
- 6488EA
Soft Blue
- D17110
≈ Autumn Maple
- 899800
≈ BioShock
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.35:1 · APCA Lc 61
Ag
AA검은색 위
WCAG 6.25:1 · APCA Lc 41
가장 좋은 글자색: #000000
WCAG 6.25:1 (AA) · APCA Lc 41
Contrast pairs
코드 스니펫
CSS
:root {
--soft-blue: #6488ea;
--soft-blue-rgb: 100 136 234;
--soft-blue-oklch: oklch(0.646 0.152 266.9);
}
.element {
color: var(--soft-blue);
background-color: hsl(224 76% 65%);
border-color: oklch(0.646 0.152 266.9);
}Tailwind CSS v4
@theme {
--color-soft-blue: #6488ea;
--color-soft-blue-50: #e3f4ff;
--color-soft-blue-100: #d3e7ff;
--color-soft-blue-200: #b9d2ff;
--color-soft-blue-300: #97b4ff;
--color-soft-blue-400: #769af8;
--color-soft-blue-500: #597eea;
--color-soft-blue-600: #4b6bc5;
--color-soft-blue-700: #3c569f;
--color-soft-blue-800: #283f77;
--color-soft-blue-900: #1b2c54;
--color-soft-blue-950: #0b1838;
}SCSS
$soft-blue: #6488ea;
$soft-blue-rgb: 100, 136, 234;
$soft-blue-light: mix(#fff, $soft-blue, 20%);
$soft-blue-dark: mix(#000, $soft-blue, 20%);
.element {
color: $soft-blue;
box-shadow: 0 0 0 2px rgba($soft-blue, 0.35);
}