Adlandırılmış renk · #EE7733
Orange Crush
Orange Crush, #EE7733: rgb(238 119 51), hsl(22 85% 57%), oklch(0.697 0.167 47). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Orange Crush color name →
#EE7733
oklch(0.697 0.167 47)
Renk dönüşümleri
- HEX
- #ee7733
- RGB
- rgb(238 119 51)
- HSL
- hsl(22 85% 57%)
- HWB
- hwb(22 20% 7%)
- OKLCH
- oklch(0.697 0.167 47)
- OKLab
- oklab(0.697 0.114 0.122)
- CIE Lab
- lab(63.71 43.84 57.11)
- LCH
- lch(63.71 72 52.5)
- CMYK
- cmyk(0% 50% 79% 7%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F1864D
- F59463
- F7A278
- FAB08B
- FCBD9F
- FDCAB2
- FED8C5
- FFE5D8
- FFF2EC
Koyu tonlar
- CF672B
- B15723
- 93471C
- 773814
- 5C2A0D
- 421C07
- 2A1003
- 140501
- 030100
Gri tonlar
- E47940
- D97B4A
- CE7D53
- C47E5B
- B97F62
- AE8069
- A3806F
- 988075
- 8C807B
Renk uyumları
Tamamlayıcı +180°
- EE7733
Orange Crush
- 00ADDE
≈ Blue Fire
Analog -30° +30°
- EE7733
Orange Crush
- F36B78
≈ Sugar Coral
- CF8F00
≈ End of Summer
Üçlü +120° +240°
- EE7733
Orange Crush
- 00B98A
≈ Slime Girl
- 988AFE
≈ Lavender Blue Shadow
Bölünmüş tamamlayıcı +150° +210°
- EE7733
Orange Crush
- 00B3B7
≈ Cyan Sky
- 579EFF
≈ Blue Chaos
Dörtlü +90° +180° +270°
- EE7733
Orange Crush
- 68B443
≈ Sour Candy
- 00ADDE
≈ Blue Fire
- C679E1
≈ Fake Love
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.86:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.32:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.32:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--orange-crush: #ee7733;
--orange-crush-rgb: 238 119 51;
--orange-crush-oklch: oklch(0.697 0.167 47);
}
.element {
color: var(--orange-crush);
background-color: hsl(22 85% 57%);
border-color: oklch(0.697 0.167 47);
}Tailwind CSS v4
@theme {
--color-orange-crush: #ee7733;
--color-orange-crush-50: #ffe8cc;
--color-orange-crush-100: #ffd8b7;
--color-orange-crush-200: #ffbf94;
--color-orange-crush-300: #fb9c67;
--color-orange-crush-400: #ec7b3d;
--color-orange-crush-500: #da5800;
--color-orange-crush-600: #b84c00;
--color-orange-crush-700: #943c00;
--color-orange-crush-800: #6f2a00;
--color-orange-crush-900: #4e1d02;
--color-orange-crush-950: #330c00;
}SCSS
$orange-crush: #ee7733;
$orange-crush-rgb: 238, 119, 51;
$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);
}