Named color · #BA160C
International Orange
International Orange is #BA160C: rgb(186 22 12), hsl(3 88% 39%), oklch(0.503 0.196 29.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · International Orange color name →
#BA160C
oklch(0.503 0.196 29.5)
Color conversions
- HEX
- #ba160c
- RGB
- rgb(186 22 12)
- HSL
- hsl(3 88% 39%)
- HWB
- hwb(3 5% 27%)
- OKLCH
- oklch(0.503 0.196 29.5)
- OKLab
- oklab(0.503 0.17 0.097)
- CIE Lab
- lab(40.45 61.16 51.02)
- LCH
- lch(40.45 79.65 39.8)
- CMYK
- cmyk(0% 88% 94% 27%)
Tints · Shades · Tones
Tints
- C43B2D
- CE5546
- D66C5D
- DE8273
- E6978A
- ECACA1
- F2C0B8
- F7D5CF
- FCEAE7
Shades
- A11209
- 890D06
- 720904
- 5C0603
- 460302
- 320201
- 1E0100
- 0D0000
- 020000
Tones
- B62D20
- B23B2E
- AE473A
- A95145
- A35B50
- 9E635A
- 976B63
- 90726D
- 897977
Color harmonies
Complementary +180°
- BA160C
International Orange
- 00717F
≈ Caribbean Dream
Analogous -30° +30°
- BA160C
International Orange
- B31160
≈ Murderous Magenta
- 945000
≈ Mochaccino
Triadic +120° +240°
- BA160C
International Orange
- 007934
≈ La Salle Green
- 3B53D1
≈ Gorgonzola Blue
Split-complementary +150° +210°
- BA160C
International Orange
- 007566
≈ Northern Hemisphere
- 006B9E
≈ Jazz Blue
Tetradic +90° +180° +270°
- BA160C
International Orange
- 5D6D00
≈ Bowser Shell
- 00717F
≈ Caribbean Dream
- 773DC1
≈ Purple Rain
Contrast & accessibility
Ag
AAOn white
WCAG 6.54:1 · APCA Lc 80
Ag
FailOn black
WCAG 3.20:1 · APCA Lc 22
Best text color: #FFFFFF
WCAG 6.54:1 (AA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--international-orange: #ba160c;
--international-orange-rgb: 186 22 12;
--international-orange-oklch: oklch(0.503 0.196 29.5);
}
.element {
color: var(--international-orange);
background-color: hsl(3 88% 39%);
border-color: oklch(0.503 0.196 29.5);
}Tailwind CSS v4
@theme {
--color-international-orange: #ba160c;
--color-international-orange-50: #ffe1d3;
--color-international-orange-100: #ffd0c0;
--color-international-orange-200: #ffb4a0;
--color-international-orange-300: #ff8e77;
--color-international-orange-400: #fd6755;
--color-international-orange-500: #ec3b2b;
--color-international-orange-600: #c73427;
--color-international-orange-700: #a02a1f;
--color-international-orange-800: #781c18;
--color-international-orange-900: #55120f;
--color-international-orange-950: #380303;
}SCSS
$international-orange: #ba160c;
$international-orange-rgb: 186, 22, 12;
$international-orange-light: mix(#fff, $international-orange, 20%);
$international-orange-dark: mix(#000, $international-orange, 20%);
.element {
color: $international-orange;
box-shadow: 0 0 0 2px rgba($international-orange, 0.35);
}