이름 색상 · #E07630
Clockwork Orange
Clockwork Orange은(는) #E07630: rgb(224 118 48), hsl(24 74% 53%), oklch(0.676 0.154 50.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Clockwork Orange color name →
#E07630
oklch(0.676 0.154 50.2)
색상 변환
- HEX
- #e07630
- RGB
- rgb(224 118 48)
- HSL
- hsl(24 74% 53%)
- HWB
- hwb(24 19% 12%)
- OKLCH
- oklch(0.676 0.154 50.2)
- OKLab
- oklab(0.676 0.099 0.119)
- CIE Lab
- lab(61.44 38.81 55.45)
- LCH
- lch(61.44 67.68 55)
- CMYK
- cmyk(0% 47% 79% 12%)
틴트 · 셰이드 · 톤
틴트
- E5854A
- E99360
- EDA175
- F1AE89
- F4BC9D
- F7C9B1
- F9D7C4
- FCE4D8
- FEF2EB
셰이드
- C36628
- A65621
- 8A471A
- 703813
- 56290C
- 3E1C06
- 270F03
- 120501
- 020100
톤
- D7783D
- CE7A48
- C57B51
- BB7D59
- B27E61
- A87F68
- 9F7F6E
- 958074
- 8B807A
색 조화
보색 +180°
- E07630
Clockwork Orange
- 00A5DA
≈ Malibu Blue
유사색 -30° +30°
- E07630
Clockwork Orange
- E66A6E
≈ Redstone
- C38C00
≈ Moutarde de Bénichon
삼각 배색 +120° +240°
- E07630
Clockwork Orange
- 00B18B
≈ Victorian Greenhouse
- 9783EE
≈ Lavender Blue Shadow
분열 보색 +150° +210°
- E07630
Clockwork Orange
- 00ACB3
≈ Greenland Green
- 5C95F5
≈ Polar Glow
사각 배색 +90° +180° +270°
- E07630
Clockwork Orange
- 5EAD4D
≈ Barnyard Grass
- 00A5DA
≈ Malibu Blue
- C074D1
≈ Purple Kush
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.08:1 · APCA Lc 57
Ag
AA검은색 위
WCAG 6.80:1 · APCA Lc 44
가장 좋은 글자색: #000000
WCAG 6.80:1 (AA) · APCA Lc 44
Contrast pairs
코드 스니펫
CSS
:root {
--clockwork-orange: #e07630;
--clockwork-orange-rgb: 224 118 48;
--clockwork-orange-oklch: oklch(0.676 0.154 50.2);
}
.element {
color: var(--clockwork-orange);
background-color: hsl(24 74% 53%);
border-color: oklch(0.676 0.154 50.2);
}Tailwind CSS v4
@theme {
--color-clockwork-orange: #e07630;
--color-clockwork-orange-50: #ffeacd;
--color-clockwork-orange-100: #ffdab9;
--color-clockwork-orange-200: #ffc297;
--color-clockwork-orange-300: #f5a06a;
--color-clockwork-orange-400: #e58041;
--color-clockwork-orange-500: #d36000;
--color-clockwork-orange-600: #b25200;
--color-clockwork-orange-700: #8f4101;
--color-clockwork-orange-800: #6b2e03;
--color-clockwork-orange-900: #4c1f03;
--color-clockwork-orange-950: #310e00;
}SCSS
$clockwork-orange: #e07630;
$clockwork-orange-rgb: 224, 118, 48;
$clockwork-orange-light: mix(#fff, $clockwork-orange, 20%);
$clockwork-orange-dark: mix(#000, $clockwork-orange, 20%);
.element {
color: $clockwork-orange;
box-shadow: 0 0 0 2px rgba($clockwork-orange, 0.35);
}