Dichtstbijzijnde benoemde kleur · #EC7C3B
#EC7C3B
Dichtstbijzijnde benoemde kleur: Orange Crush
#EC7C3B (rgb(236 124 59), hsl(22 82% 58%), oklch(0.702 0.158 48)) komt het dichtst bij de benoemde kleur Orange Crush. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#EC7C3B
oklch(0.702 0.158 48)
Kleurconversies
- HEX
- #ec7c3b
- RGB
- rgb(236 124 59)
- HSL
- hsl(22 82% 58%)
- HWB
- hwb(22 23% 7%)
- OKLCH
- oklch(0.702 0.158 48)
- OKLab
- oklab(0.702 0.106 0.118)
- CIE Lab
- lab(64.47 40.9 54.12)
- LCH
- lch(64.47 67.83 52.9)
- CMYK
- cmyk(0% 47% 75% 7%)
Tinten · Schaduwen · Tonen
Tinten
- EF8A53
- F39868
- F5A57B
- F8B28F
- FABFA1
- FCCCB4
- FDD9C7
- FEE6D9
- FFF2EC
Schaduwen
- CD6B32
- AF5A29
- 924A21
- 763B19
- 5B2C11
- 421E09
- 291104
- 130501
- 030100
Tonen
- E27E46
- D77F4F
- CD8057
- C2805E
- B88165
- AD816B
- A28171
- 978176
- 8C817B
Kleurharmonieën
Complementair +180°
- EC7C3B
Orange Crush
- 00AEE2
≈ Royal Peacock
Analoog -30° +30°
- EC7C3B
Orange Crush
- F17179
≈ Sugar Coral
- D09200
≈ Elysium Gold
Triadisch +120° +240°
- EC7C3B
Orange Crush
- 00BB8E
≈ Slime Girl
- 9C8CFB
≈ Lavender Blue Shadow
Gesplitst complementair +150° +210°
- EC7C3B
Orange Crush
- 00B5BA
≈ Cyan Sky
- 5E9FFF
≈ Blue Chaos
Tetradisch +90° +180° +270°
- EC7C3B
Orange Crush
- 6AB54E
≈ Pure Apple
- 00AEE2
≈ Royal Peacock
- C77CDE
≈ Lavender Perceptions
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.79:1 · APCA Lc 53
Ag
AAAOp zwart
WCAG 7.51:1 · APCA Lc 49
Beste tekstkleur: #000000
WCAG 7.51:1 (AAA) · APCA Lc 49
Contrast pairs
Codefragmenten
CSS
:root {
--orange-crush: #ec7c3b;
--orange-crush-rgb: 236 124 59;
--orange-crush-oklch: oklch(0.702 0.158 48);
}
.element {
color: var(--orange-crush);
background-color: hsl(22 82% 58%);
border-color: oklch(0.702 0.158 48);
}Tailwind CSS v4
@theme {
--color-orange-crush: #ec7c3b;
--color-orange-crush-50: #ffe9cd;
--color-orange-crush-100: #ffd9b9;
--color-orange-crush-200: #ffc197;
--color-orange-crush-300: #f89e6b;
--color-orange-crush-400: #e87e42;
--color-orange-crush-500: #d65d00;
--color-orange-crush-600: #b54f00;
--color-orange-crush-700: #913f03;
--color-orange-crush-800: #6d2c05;
--color-orange-crush-900: #4d1e04;
--color-orange-crush-950: #320d00;
}SCSS
$orange-crush: #ec7c3b;
$orange-crush-rgb: 236, 124, 59;
$orange-crush-light: mix(#fff, $orange-crush, 20%);
$orange-crush-dark: mix(#000, $orange-crush, 20%);
.element {
color: $orange-crush;
box-shadow: 0 0 0 2px rgba($orange-crush, 0.35);
}