이름 색상 · #337EFF
Ceruleite
Ceruleite은(는) #337EFF: rgb(51 126 255), hsl(218 100% 60%), oklch(0.619 0.206 260.5). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Ceruleite color name →
#337EFF
oklch(0.619 0.206 260.5)
색상 변환
- HEX
- #337eff
- RGB
- rgb(51 126 255)
- HSL
- hsl(218 100% 60%)
- HWB
- hwb(218 20% 0%)
- OKLCH
- oklch(0.619 0.206 260.5)
- OKLab
- oklab(0.619 -0.034 -0.203)
- CIE Lab
- lab(53.77 12.86 -72.13)
- LCH
- lch(53.77 73.27 280.1)
- CMYK
- cmyk(80% 51% 0% 0%)
틴트 · 셰이드 · 톤
틴트
- 498DFF
- 5E9AFF
- 73A8FF
- 87B5FF
- 9AC2FF
- AECEFF
- C2DBFF
- D6E7FF
- EBF3FF
셰이드
- 2B6DDE
- 235CBE
- 1C4C9E
- 143C80
- 0D2D63
- 071F48
- 03112E
- 010516
- 000103
톤
- 3D80F3
- 4781E6
- 4F82DA
- 5783CD
- 5F83C1
- 6683B4
- 6D83A7
- 73829B
- 7A818D
색 조화
보색 +180°
- 337EFF
Ceruleite
- AD7C00
≈ Brown Butter
유사색 -30° +30°
- 337EFF
Ceruleite
- 0092C2
≈ Surf Rider
- 8A66F6
≈ Purple Anemone
삼각 배색 +120° +240°
- 337EFF
Ceruleite
- E73C4E
≈ Desire
- 2AA100
≈ Space Invader
분열 보색 +150° +210°
- 337EFF
Ceruleite
- CF6200
≈ Brusque Brown
- 8B8C00
≈ Palak Paneer
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.77:1 · APCA Lc 65
Ag
AA검은색 위
WCAG 5.56:1 · APCA Lc 37
가장 좋은 글자색: #000000
WCAG 5.56:1 (AA) · APCA Lc 37
Contrast pairs
코드 스니펫
CSS
:root {
--ceruleite: #337eff;
--ceruleite-rgb: 51 126 255;
--ceruleite-oklch: oklch(0.619 0.206 260.5);
}
.element {
color: var(--ceruleite);
background-color: hsl(218 100% 60%);
border-color: oklch(0.619 0.206 260.5);
}Tailwind CSS v4
@theme {
--color-ceruleite: #337eff;
--color-ceruleite-50: #d6f6ff;
--color-ceruleite-100: #c3e8ff;
--color-ceruleite-200: #a5d4ff;
--color-ceruleite-300: #7db5ff;
--color-ceruleite-400: #5299ff;
--color-ceruleite-500: #267cff;
--color-ceruleite-600: #2369e1;
--color-ceruleite-700: #1b54b5;
--color-ceruleite-800: #093e88;
--color-ceruleite-900: #062b60;
--color-ceruleite-950: #001742;
}SCSS
$ceruleite: #337eff;
$ceruleite-rgb: 51, 126, 255;
$ceruleite-light: mix(#fff, $ceruleite, 20%);
$ceruleite-dark: mix(#000, $ceruleite, 20%);
.element {
color: $ceruleite;
box-shadow: 0 0 0 2px rgba($ceruleite, 0.35);
}