이름 색상 · #F4A045
Osage Orange
Osage Orange은(는) #F4A045: rgb(244 160 69), hsl(31 89% 61%), oklch(0.774 0.144 64.6). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Osage Orange color name →
#F4A045
oklch(0.774 0.144 64.6)
색상 변환
- HEX
- #f4a045
- RGB
- rgb(244 160 69)
- HSL
- hsl(31 89% 61%)
- HWB
- hwb(31 27% 4%)
- OKLCH
- oklch(0.774 0.144 64.6)
- OKLab
- oklab(0.774 0.062 0.13)
- CIE Lab
- lab(73.34 26.62 58.76)
- LCH
- lch(73.34 64.51 65.6)
- CMYK
- cmyk(0% 34% 72% 4%)
틴트 · 셰이드 · 톤
틴트
- F6AA5C
- F8B471
- F9BE84
- FBC796
- FCD1A8
- FDDABA
- FEE3CB
- FEEDDD
- FFF6EE
셰이드
- D48B3B
- B57631
- 976127
- 7A4E1E
- 5E3B15
- 44290C
- 2B1905
- 140902
- 030100
톤
- E89D4F
- DD9A58
- D1985F
- C69565
- BA916B
- AE8E70
- A38B75
- 978779
- 8C847D
색 조화
보색 +180°
- F4A045
Osage Orange
- 6CBDFF
≈ Green Darner Tail
유사색 -30° +30°
- F4A045
Osage Orange
- FF947A
≈ Coralistic
- D3B332
≈ Ogen Melon
삼각 배색 +120° +240°
- F4A045
Osage Orange
- 00D1C0
≈ Exquisite Turquoise
- CA9DFF
≈ Diva
분열 보색 +150° +210°
- F4A045
Osage Orange
- 00CBEB
≈ Picnic Day Sky
- 9FB0FF
≈ Widowmaker
사각 배색 +90° +180° +270°
- F4A045
Osage Orange
- 5ED08B
≈ Spring Bouquet
- 6CBDFF
≈ Green Darner Tail
- ED91DA
≈ Mayflower Orchid
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.10:1 · APCA Lc 41
Ag
AAA검은색 위
WCAG 9.96:1 · APCA Lc 61
가장 좋은 글자색: #000000
WCAG 9.96:1 (AAA) · APCA Lc 61
Contrast pairs
코드 스니펫
CSS
:root {
--osage-orange: #f4a045;
--osage-orange-rgb: 244 160 69;
--osage-orange-oklch: oklch(0.774 0.144 64.6);
}
.element {
color: var(--osage-orange);
background-color: hsl(31 89% 61%);
border-color: oklch(0.774 0.144 64.6);
}Tailwind CSS v4
@theme {
--color-osage-orange: #f4a045;
--color-osage-orange-50: #ffeeca;
--color-osage-orange-100: #ffdfb5;
--color-osage-orange-200: #ffc992;
--color-osage-orange-300: #e9a863;
--color-osage-orange-400: #d88a33;
--color-osage-orange-500: #c56d00;
--color-osage-orange-600: #a75d00;
--color-osage-orange-700: #864a00;
--color-osage-orange-800: #643500;
--color-osage-orange-900: #462400;
--color-osage-orange-950: #2e1200;
}SCSS
$osage-orange: #f4a045;
$osage-orange-rgb: 244, 160, 69;
$osage-orange-light: mix(#fff, $osage-orange, 20%);
$osage-orange-dark: mix(#000, $osage-orange, 20%);
.element {
color: $osage-orange;
box-shadow: 0 0 0 2px rgba($osage-orange, 0.35);
}