Nearest named color · #FF3100
#FF3100
Nearest named color: Boiling Magma
#FF3100 (rgb(255 49 0), hsl(12 100% 50%), oklch(0.645 0.242 32.4)) is closest to the named color Boiling Magma. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#FF3100
oklch(0.645 0.242 32.4)
Color conversions
- HEX
- #ff3100
- RGB
- rgb(255 49 0)
- HSL
- hsl(12 100% 50%)
- HWB
- hwb(12 0% 0%)
- OKLCH
- oklch(0.645 0.242 32.4)
- OKLab
- oklab(0.645 0.204 0.13)
- CIE Lab
- lab(56.54 74.56 70.34)
- LCH
- lch(56.54 102.5 43.3)
- CMYK
- cmyk(0% 81% 100% 0%)
Tints · Shades · Tones
Tints
- FF5233
- FF6B4E
- FF8066
- FF947D
- FFA793
- FFB9A8
- FFCBBE
- FFDDD3
- FFEEE9
Shades
- DE2900
- BE2200
- 9E1A00
- 801300
- 630C00
- 480600
- 2E0300
- 160100
- 030000
Tones
- F44323
- E85034
- DD5A42
- D1624D
- C56957
- B86F60
- AB7468
- 9E7971
- 8F7D78
Color harmonies
Complementary +180°
- FF3100
Boiling Magma
- 009FB6
≈ January Blue
Analogous -30° +30°
- FF3100
Boiling Magma
- F82781
≈ Pink Piano
- CB7500
≈ Mountain Ash
Triadic +120° +240°
- FF3100
Boiling Magma
- 00A958
≈ Rita Repulsa
- 697FFF
≈ Byzantine Night Blue
Split-complementary +150° +210°
- FF3100
Boiling Magma
- 00A493
≈ Persian Green
- 0096E2
≈ Atmosphere
Tetradic +90° +180° +270°
- FF3100
Boiling Magma
- 7D9C00
≈ Luminescent Green
- 009FB6
≈ January Blue
- AB5DFF
≈ Vega Violet
Contrast & accessibility
Ag
FailOn white
WCAG 3.68:1 · APCA Lc 62
Ag
AAOn black
WCAG 5.69:1 · APCA Lc 39
Best text color: #000000
WCAG 5.69:1 (AA) · APCA Lc 39
Contrast pairs
Code snippets
CSS
:root {
--boiling-magma: #ff3100;
--boiling-magma-rgb: 255 49 0;
--boiling-magma-oklch: oklch(0.645 0.242 32.4);
}
.element {
color: var(--boiling-magma);
background-color: hsl(12 100% 50%);
border-color: oklch(0.645 0.242 32.4);
}Tailwind CSS v4
@theme {
--color-boiling-magma: #ff3100;
--color-boiling-magma-50: #ffddc7;
--color-boiling-magma-100: #ffcab2;
--color-boiling-magma-200: #ffac8d;
--color-boiling-magma-300: #ff815d;
--color-boiling-magma-400: #ff5230;
--color-boiling-magma-500: #ff0000;
--color-boiling-magma-600: #d70000;
--color-boiling-magma-700: #ad0300;
--color-boiling-magma-800: #820000;
--color-boiling-magma-900: #5c0200;
--color-boiling-magma-950: #3e0000;
}SCSS
$boiling-magma: #ff3100;
$boiling-magma-rgb: 255, 49, 0;
$boiling-magma-light: mix(#fff, $boiling-magma, 20%);
$boiling-magma-dark: mix(#000, $boiling-magma, 20%);
.element {
color: $boiling-magma;
box-shadow: 0 0 0 2px rgba($boiling-magma, 0.35);
}