이름 색상 · #7777EE
Hera Blue
Hera Blue은(는) #7777EE: rgb(119 119 238), hsl(240 78% 70%), oklch(0.628 0.174 280.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Hera Blue color name →
#7777EE
oklch(0.628 0.174 280.1)
색상 변환
- HEX
- #7777ee
- RGB
- rgb(119 119 238)
- HSL
- hsl(240 78% 70%)
- HWB
- hwb(240 47% 7%)
- OKLCH
- oklch(0.628 0.174 280.1)
- OKLab
- oklab(0.628 0.031 -0.172)
- CIE Lab
- lab(54.57 24.48 -61.23)
- LCH
- lch(54.57 65.94 291.8)
- CMYK
- cmyk(50% 50% 0% 7%)
틴트 · 셰이드 · 톤
틴트
- 8385F1
- 8F94F4
- 9CA1F6
- A9AFF8
- B7BCFA
- C5CAFC
- D3D7FD
- E1E4FE
- F0F2FF
셰이드
- 6767CF
- 5757B1
- 474793
- 383877
- 2A2A5C
- 1C1C42
- 10102A
- 050514
- 010103
톤
- 7779E3
- 787BD8
- 787CCE
- 797DC3
- 7A7EB8
- 7B7FAD
- 7C80A2
- 7D8097
- 7F808C
색 조화
보색 +180°
- 7777EE
Hera Blue
- 9B8900
≈ Medusa Green
유사색 -30° +30°
- 7777EE
Hera Blue
- 0E8BEC
≈ Bleu de France
- A965D6
≈ Teldrassil Purple
삼각 배색 +120° +240°
- 7777EE
Hera Blue
- DC5A26
≈ War Paint Red
- 00A26A
≈ Emerald Light Green
분열 보색 +150° +210°
- 7777EE
Hera Blue
- BB7700
≈ Cassandra’s Curse
- 659B00
≈ Gecko’s Dream
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.71:1 · APCA Lc 64
Ag
AA검은색 위
WCAG 5.65:1 · APCA Lc 37
가장 좋은 글자색: #000000
WCAG 5.65:1 (AA) · APCA Lc 37
Contrast pairs
코드 스니펫
CSS
:root {
--hera-blue: #7777ee;
--hera-blue-rgb: 119 119 238;
--hera-blue-oklch: oklch(0.628 0.174 280.1);
}
.element {
color: var(--hera-blue);
background-color: hsl(240 78% 70%);
border-color: oklch(0.628 0.174 280.1);
}Tailwind CSS v4
@theme {
--color-hera-blue: #7777ee;
--color-hera-blue-50: #edf0ff;
--color-hera-blue-100: #dee1ff;
--color-hera-blue-200: #c8cbff;
--color-hera-blue-300: #aaabff;
--color-hera-blue-400: #8c8fff;
--color-hera-blue-500: #7471f5;
--color-hera-blue-600: #6260cf;
--color-hera-blue-700: #4e4da6;
--color-hera-blue-800: #36397d;
--color-hera-blue-900: #252758;
--color-hera-blue-950: #14143c;
}SCSS
$hera-blue: #7777ee;
$hera-blue-rgb: 119, 119, 238;
$hera-blue-light: mix(#fff, $hera-blue, 20%);
$hera-blue-dark: mix(#000, $hera-blue, 20%);
.element {
color: $hera-blue;
box-shadow: 0 0 0 2px rgba($hera-blue, 0.35);
}