Dichtstbijzijnde benoemde kleur · #ED7B32
#ED7B32
Dichtstbijzijnde benoemde kleur: Spiced up Orange
#ED7B32 (rgb(237 123 50), hsl(23 84% 56%), oklch(0.701 0.163 49.4)) komt het dichtst bij de benoemde kleur Spiced up Orange. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#ED7B32
oklch(0.701 0.163 49.4)
Kleurconversies
- HEX
- #ed7b32
- RGB
- rgb(237 123 50)
- HSL
- hsl(23 84% 56%)
- HWB
- hwb(23 20% 7%)
- OKLCH
- oklch(0.701 0.163 49.4)
- OKLab
- oklab(0.701 0.106 0.124)
- CIE Lab
- lab(64.35 41.53 58.04)
- LCH
- lch(64.35 71.37 54.4)
- CMYK
- cmyk(0% 48% 79% 7%)
Tinten · Schaduwen · Tonen
Tinten
- F0894C
- F49763
- F6A577
- F9B28B
- FBBF9F
- FCCCB2
- FED9C5
- FFE6D9
- FFF2EC
Schaduwen
- CE6A2A
- B05A22
- 934A1B
- 773A14
- 5C2C0D
- 421E07
- 2A1003
- 140501
- 030100
Tonen
- E37D3F
- D87E4A
- CE7F53
- C3805B
- B88162
- AD8169
- A2816F
- 978175
- 8C817B
Kleurharmonieën
Complementair +180°
- ED7B32
Spiced up Orange
- 00AEE3
≈ Royal Peacock
Analoog -30° +30°
- ED7B32
Spiced up Orange
- F36F75
≈ Sugar Coral
- CE9200
≈ Elysium Gold
Triadisch +120° +240°
- ED7B32
Spiced up Orange
- 00BA90
≈ Mountain Meadow
- 9E8AFC
≈ Lavender Blue Shadow
Gesplitst complementair +150° +210°
- ED7B32
Spiced up Orange
- 00B5BB
≈ Cyan Sky
- 619EFF
≈ Blue Chaos
Tetradisch +90° +180° +270°
- ED7B32
Spiced up Orange
- 64B64D
≈ Pure Apple
- 00AEE3
≈ Royal Peacock
- CA7ADE
≈ Lavender Perceptions
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.80:1 · APCA Lc 53
Ag
AAAOp zwart
WCAG 7.48:1 · APCA Lc 48
Beste tekstkleur: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
Codefragmenten
CSS
:root {
--spiced-up-orange: #ed7b32;
--spiced-up-orange-rgb: 237 123 50;
--spiced-up-orange-oklch: oklch(0.701 0.163 49.4);
}
.element {
color: var(--spiced-up-orange);
background-color: hsl(23 84% 56%);
border-color: oklch(0.701 0.163 49.4);
}Tailwind CSS v4
@theme {
--color-spiced-up-orange: #ed7b32;
--color-spiced-up-orange-50: #ffe9cb;
--color-spiced-up-orange-100: #ffd9b7;
--color-spiced-up-orange-200: #ffc094;
--color-spiced-up-orange-300: #f99e66;
--color-spiced-up-orange-400: #e97d3a;
--color-spiced-up-orange-500: #d75c00;
--color-spiced-up-orange-600: #b64e00;
--color-spiced-up-orange-700: #923f00;
--color-spiced-up-orange-800: #6d2c00;
--color-spiced-up-orange-900: #4d1e01;
--color-spiced-up-orange-950: #330d00;
}SCSS
$spiced-up-orange: #ed7b32;
$spiced-up-orange-rgb: 237, 123, 50;
$spiced-up-orange-light: mix(#fff, $spiced-up-orange, 20%);
$spiced-up-orange-dark: mix(#000, $spiced-up-orange, 20%);
.element {
color: $spiced-up-orange;
box-shadow: 0 0 0 2px rgba($spiced-up-orange, 0.35);
}