이름 색상 · #FFAA4A
Five Star
Five Star은(는) #FFAA4A: rgb(255 170 74), hsl(32 100% 65%), oklch(0.805 0.148 65.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Five Star color name →
#FFAA4A
oklch(0.805 0.148 65.9)
색상 변환
- HEX
- #ffaa4a
- RGB
- rgb(255 170 74)
- HSL
- hsl(32 100% 65%)
- HWB
- hwb(32 29% 0%)
- OKLCH
- oklch(0.805 0.148 65.9)
- OKLab
- oklab(0.805 0.06 0.135)
- CIE Lab
- lab(76.97 26.29 60.71)
- LCH
- lch(76.97 66.16 66.6)
- CMYK
- cmyk(0% 33% 71% 0%)
틴트 · 셰이드 · 톤
틴트
- FFB361
- FFBC75
- FFC588
- FFCD9A
- FFD6AB
- FFDEBC
- FFE6CD
- FFEFDE
- FFF7EE
셰이드
- DE933F
- BE7D35
- 9E682A
- 805320
- 633F17
- 482D0E
- 2E1B06
- 160B02
- 030100
톤
- F2A654
- E5A25C
- D99E63
- CC9A69
- BF966E
- B29272
- A68E76
- 99897A
- 8D857D
색 조화
보색 +180°
- FFAA4A
Five Star
- 85C6FF
≈ Chromis Damsel Blue
유사색 -30° +30°
- FFAA4A
Five Star
- FFA58C
≈ Citrus Hill
- DCBE3A
≈ Wax
삼각 배색 +120° +240°
- FFAA4A
Five Star
- 00DCCD
≈ Mint Morning
- D3AAFF
≈ Purple Hepatica
분열 보색 +150° +210°
- FFAA4A
Five Star
- 00D5F9
≈ Neon Blue
- AEBAFF
≈ Greyish Lavender
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.89:1 · APCA Lc 36
Ag
AAA검은색 위
WCAG 11.10:1 · APCA Lc 67
가장 좋은 글자색: #000000
WCAG 11.10:1 (AAA) · APCA Lc 67
Contrast pairs
코드 스니펫
CSS
:root {
--five-star: #ffaa4a;
--five-star-rgb: 255 170 74;
--five-star-oklch: oklch(0.805 0.148 65.9);
}
.element {
color: var(--five-star);
background-color: hsl(32 100% 65%);
border-color: oklch(0.805 0.148 65.9);
}Tailwind CSS v4
@theme {
--color-five-star: #ffaa4a;
--color-five-star-50: #ffeec9;
--color-five-star-100: #ffdfb3;
--color-five-star-200: #ffc98f;
--color-five-star-300: #e9a85f;
--color-five-star-400: #d88a2c;
--color-five-star-500: #c66d00;
--color-five-star-600: #a75d00;
--color-five-star-700: #864a00;
--color-five-star-800: #643500;
--color-five-star-900: #472400;
--color-five-star-950: #2e1200;
}SCSS
$five-star: #ffaa4a;
$five-star-rgb: 255, 170, 74;
$five-star-light: mix(#fff, $five-star, 20%);
$five-star-dark: mix(#000, $five-star, 20%);
.element {
color: $five-star;
box-shadow: 0 0 0 2px rgba($five-star, 0.35);
}