Named color · #FFBD24
Macaw
Macaw is #FFBD24: rgb(255 189 36), hsl(42 100% 57%), oklch(0.837 0.165 81.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Macaw color name →
#FFBD24
oklch(0.837 0.165 81.8)
Color conversions
- HEX
- #ffbd24
- RGB
- rgb(255 189 36)
- HSL
- hsl(42 100% 57%)
- HWB
- hwb(42 14% 0%)
- OKLCH
- oklch(0.837 0.165 81.8)
- OKLab
- oklab(0.837 0.024 0.164)
- CIE Lab
- lab(81.2 15.93 77.3)
- LCH
- lch(81.2 78.92 78.4)
- CMYK
- cmyk(0% 26% 86% 0%)
Tints · Shades · Tones
Tints
- FFC44C
- FFCB66
- FFD27D
- FFD992
- FFDFA5
- FFE6B8
- FFECCA
- FFF3DC
- FFF9EE
Shades
- DEA41E
- BE8C18
- 9E7412
- 805D0C
- 634707
- 483304
- 2E1F02
- 160D00
- 030200
Tones
- F2B73C
- E5B14B
- D8AB56
- CBA55F
- BE9F67
- B2996D
- A59373
- 998D78
- 8C867C
Color harmonies
Complementary +180°
- FFBD24
Macaw
- ADCBFF
≈ Night Snow
Analogous -30° +30°
- FFBD24
Macaw
- FFB78C
≈ Coral Wisp
- CDD33D
≈ Southern Platyfish
Triadic +120° +240°
- FFBD24
Macaw
- 00E4F1
≈ Cold Heights
- F3ABFF
≈ Pink Sugar
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.67:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.55:1 · APCA Lc 74
Best text color: #000000
WCAG 12.55:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--macaw: #ffbd24;
--macaw-rgb: 255 189 36;
--macaw-oklch: oklch(0.837 0.165 81.8);
}
.element {
color: var(--macaw);
background-color: hsl(42 100% 57%);
border-color: oklch(0.837 0.165 81.8);
}Tailwind CSS v4
@theme {
--color-macaw: #ffbd24;
--color-macaw-50: #fff2c0;
--color-macaw-100: #ffe4a8;
--color-macaw-200: #f6ce7f;
--color-macaw-300: #dfaf46;
--color-macaw-400: #cf9200;
--color-macaw-500: #bb7600;
--color-macaw-600: #9e6400;
--color-macaw-700: #7f5000;
--color-macaw-800: #603900;
--color-macaw-900: #432700;
--color-macaw-950: #2b1500;
}SCSS
$macaw: #ffbd24;
$macaw-rgb: 255, 189, 36;
$macaw-light: mix(#fff, $macaw, 20%);
$macaw-dark: mix(#000, $macaw, 20%);
.element {
color: $macaw;
box-shadow: 0 0 0 2px rgba($macaw, 0.35);
}