이름 색상 · #5F758F
Columbus
Columbus은(는) #5F758F: rgb(95 117 143), hsl(213 20% 47%), oklch(0.555 0.048 252.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Columbus color name →
#5F758F
oklch(0.555 0.048 252.9)
색상 변환
- HEX
- #5f758f
- RGB
- rgb(95 117 143)
- HSL
- hsl(213 20% 47%)
- HWB
- hwb(213 37% 44%)
- OKLCH
- oklch(0.555 0.048 252.9)
- OKLab
- oklab(0.555 -0.014 -0.046)
- CIE Lab
- lab(48.21 -3.35 -17.03)
- LCH
- lch(48.21 17.36 258.9)
- CMYK
- cmyk(34% 18% 0% 44%)
틴트 · 셰이드 · 톤
틴트
- 6E829A
- 7D8FA5
- 8C9DB0
- 9CAABB
- ACB8C6
- BCC6D1
- CDD4DD
- DDE2E8
- EEF0F3
셰이드
- 52657C
- 445569
- 384657
- 2C3745
- 202934
- 151C24
- 0A0F15
- 030507
- 000101
톤
- 62768E
- 66778C
- 69788B
- 6C7A89
- 707B88
- 737C86
- 767D85
- 7A7E83
- 7D7F82
색 조화
보색 +180°
- 5F758F
Columbus
- 856F54
≈ Appaloosa Spots
유사색 -30° +30°
- 5F758F
Columbus
- 537A88
≈ Rocky Hill
- 6E708F
≈ Silk Crepe Mauve
삼각 배색 +120° +240°
- 5F758F
Columbus
- 8D686B
≈ Mauve-a-Lish
- 68795C
≈ Mildura
분열 보색 +150° +210°
- 5F758F
Columbus
- 8C6A5D
≈ Creamed Muscat
- 787453
≈ Truly Olive
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
AA흰색 위
WCAG 4.74:1 · APCA Lc 73
Ag
Fail검은색 위
WCAG 4.42:1 · APCA Lc 29
가장 좋은 글자색: #FFFFFF
WCAG 4.74:1 (AA) · APCA Lc 73
Contrast pairs
코드 스니펫
CSS
:root {
--columbus: #5f758f;
--columbus-rgb: 95 117 143;
--columbus-oklch: oklch(0.555 0.048 252.9);
}
.element {
color: var(--columbus);
background-color: hsl(213 20% 47%);
border-color: oklch(0.555 0.048 252.9);
}Tailwind CSS v4
@theme {
--color-columbus: #5f758f;
--color-columbus-50: #ecf6ff;
--color-columbus-100: #dde9f8;
--color-columbus-200: #c7d6e9;
--color-columbus-300: #a7b9d0;
--color-columbus-400: #8ba1bb;
--color-columbus-500: #7089a6;
--color-columbus-600: #5f748c;
--color-columbus-700: #4c5c70;
--color-columbus-800: #364453;
--color-columbus-900: #252f3a;
--color-columbus-950: #131b24;
}SCSS
$columbus: #5f758f;
$columbus-rgb: 95, 117, 143;
$columbus-light: mix(#fff, $columbus, 20%);
$columbus-dark: mix(#000, $columbus, 20%);
.element {
color: $columbus;
box-shadow: 0 0 0 2px rgba($columbus, 0.35);
}