이름 색상 · #E85112
Retro Orange
Retro Orange은(는) #E85112: rgb(232 81 18), hsl(18 86% 49%), oklch(0.635 0.197 38.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Retro Orange color name →
#E85112
oklch(0.635 0.197 38.7)
색상 변환
- HEX
- #e85112
- RGB
- rgb(232 81 18)
- HSL
- hsl(18 86% 49%)
- HWB
- hwb(18 7% 9%)
- OKLCH
- oklch(0.635 0.197 38.7)
- OKLab
- oklab(0.635 0.154 0.124)
- CIE Lab
- lab(55.98 57.75 62.98)
- LCH
- lch(55.98 85.45 47.5)
- CMYK
- cmyk(0% 65% 92% 9%)
틴트 · 셰이드 · 톤
틴트
- ED6638
- F17951
- F58B69
- F99C7F
- FBAD94
- FDBEA9
- FFCEBF
- FFDFD4
- FFEFE9
셰이드
- CA450E
- AC3A0A
- 902F07
- 742404
- 591A02
- 401001
- 290701
- 130200
- 030000
톤
- DF5929
- D56038
- CC6644
- C26B4F
- B87058
- AE7461
- A37769
- 987B71
- 8C7D79
색 조화
보색 +180°
- E85112
Retro Orange
- 009AB9
≈ Serene Blue
유사색 -30° +30°
- E85112
Retro Orange
- E74772
≈ Radishical
- C07800
≈ Cassandra’s Curse
삼각 배색 +120° +240°
- E85112
Retro Orange
- 00A469
≈ Green Haze
- 7576FE
≈ Stargate Shimmer
분열 보색 +150° +210°
- E85112
Retro Orange
- 009F98
≈ Spectra Green
- 008EEE
≈ Bleu de France
사각 배색 +90° +180° +270°
- E85112
Retro Orange
- 6B9D00
≈ Gecko’s Dream
- 009AB9
≈ Serene Blue
- AD61E4
≈ Violet Voltage
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.73:1 · APCA Lc 64
Ag
AA검은색 위
WCAG 5.61:1 · APCA Lc 38
가장 좋은 글자색: #000000
WCAG 5.61:1 (AA) · APCA Lc 38
Contrast pairs
코드 스니펫
CSS
:root {
--retro-orange: #e85112;
--retro-orange-rgb: 232 81 18;
--retro-orange-oklch: oklch(0.635 0.197 38.7);
}
.element {
color: var(--retro-orange);
background-color: hsl(18 86% 49%);
border-color: oklch(0.635 0.197 38.7);
}Tailwind CSS v4
@theme {
--color-retro-orange: #e85112;
--color-retro-orange-50: #ffe3ca;
--color-retro-orange-100: #ffd2b5;
--color-retro-orange-200: #ffb792;
--color-retro-orange-300: #ff9164;
--color-retro-orange-400: #fb6b3a;
--color-retro-orange-500: #ea4000;
--color-retro-orange-600: #c63900;
--color-retro-orange-700: #9f2d00;
--color-retro-orange-800: #771e00;
--color-retro-orange-900: #541401;
--color-retro-orange-950: #380400;
}SCSS
$retro-orange: #e85112;
$retro-orange-rgb: 232, 81, 18;
$retro-orange-light: mix(#fff, $retro-orange, 20%);
$retro-orange-dark: mix(#000, $retro-orange, 20%);
.element {
color: $retro-orange;
box-shadow: 0 0 0 2px rgba($retro-orange, 0.35);
}