Colore con nome più vicino · #EC7C3B
#EC7C3B
Colore con nome più vicino: Orange Crush
#EC7C3B (rgb(236 124 59), hsl(22 82% 58%), oklch(0.702 0.158 48)) è più vicino al colore con nome Orange Crush. Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
#EC7C3B
oklch(0.702 0.158 48)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- EF8A53
- F39868
- F5A57B
- F8B28F
- FABFA1
- FCCCB4
- FDD9C7
- FEE6D9
- FFF2EC
Ombre
- CD6B32
- AF5A29
- 924A21
- 763B19
- 5B2C11
- 421E09
- 291104
- 130501
- 030100
Toni
- E27E46
- D77F4F
- CD8057
- C2805E
- B88165
- AD816B
- A28171
- 978176
- 8C817B
Armonie di colore
Complementare +180°
- EC7C3B
Orange Crush
- 00AEE2
≈ Royal Peacock
Analogo -30° +30°
- EC7C3B
Orange Crush
- F17179
≈ Sugar Coral
- D09200
≈ Elysium Gold
Triadico +120° +240°
- EC7C3B
Orange Crush
- 00BB8E
≈ Slime Girl
- 9C8CFB
≈ Lavender Blue Shadow
Complementare divisa +150° +210°
- EC7C3B
Orange Crush
- 00B5BA
≈ Cyan Sky
- 5E9FFF
≈ Blue Chaos
Tetradico +90° +180° +270°
- EC7C3B
Orange Crush
- 6AB54E
≈ Pure Apple
- 00AEE2
≈ Royal Peacock
- C77CDE
≈ Lavender Perceptions
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.79:1 · APCA Lc 53
Ag
AAASu nero
WCAG 7.51:1 · APCA Lc 49
Miglior colore del testo: #000000
WCAG 7.51:1 (AAA) · APCA Lc 49
Contrast pairs
Frammenti di codice
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);
}