Adlandırılmış renk · #FF9A45
Orange Hibiscus
Orange Hibiscus, #FF9A45: rgb(255 154 69), hsl(27 100% 64%), oklch(0.777 0.155 57.3). 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 Hibiscus color name →
#FF9A45
oklch(0.777 0.155 57.3)
Renk dönüşümleri
- HEX
- #ff9a45
- RGB
- rgb(255 154 69)
- HSL
- hsl(27 100% 64%)
- HWB
- hwb(27 27% 0%)
- OKLCH
- oklch(0.777 0.155 57.3)
- OKLab
- oklab(0.777 0.084 0.13)
- CIE Lab
- lab(73.4 34.04 59.37)
- LCH
- lch(73.4 68.43 60.2)
- CMYK
- cmyk(0% 40% 73% 0%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- FFA55C
- FFAF71
- FFBA84
- FFC496
- FFCEA8
- FFD8BA
- FFE2CB
- FFECDD
- FFF5EE
Koyu tonlar
- DE853B
- BE7131
- 9E5E27
- 804B1E
- 633915
- 48270C
- 2E1705
- 160902
- 030100
Gri tonlar
- F2984F
- E69658
- D9945F
- CC9165
- C08F6B
- B38C70
- A78975
- 9A8679
- 8D837D
Renk uyumları
Tamamlayıcı +180°
- FF9A45
Orange Hibiscus
- 59C2FF
≈ Blue Mana
Analog -30° +30°
- FF9A45
Orange Hibiscus
- FF9488
≈ Adobe Avenue
- E0AF16
≈ Mustard Yellow
Üçlü +120° +240°
- FF9A45
Orange Hibiscus
- 00D4B5
≈ Channel Marker Green
- C0A4FF
≈ Diva
Bölünmüş tamamlayıcı +150° +210°
- FF9A45
Orange Hibiscus
- 00CDE2
≈ Picnic Day Sky
- 96B4FF
≈ Carolina Blue
Dörtlü +90° +180° +270°
- FF9A45
Orange Hibiscus
- 6AD17A
≈ Spring Bouquet
- 59C2FF
≈ Blue Mana
- EA91E9
≈ Diva Mecha
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.10:1 · APCA Lc 41
Ag
AAASiyah üzerinde
WCAG 9.96:1 · APCA Lc 61
En iyi metin rengi: #000000
WCAG 9.96:1 (AAA) · APCA Lc 61
Contrast pairs
Kod parçacıkları
CSS
:root {
--orange-hibiscus: #ff9a45;
--orange-hibiscus-rgb: 255 154 69;
--orange-hibiscus-oklch: oklch(0.777 0.155 57.3);
}
.element {
color: var(--orange-hibiscus);
background-color: hsl(27 100% 64%);
border-color: oklch(0.777 0.155 57.3);
}Tailwind CSS v4
@theme {
--color-orange-hibiscus: #ff9a45;
--color-orange-hibiscus-50: #ffebca;
--color-orange-hibiscus-100: #ffdcb4;
--color-orange-hibiscus-200: #ffc591;
--color-orange-hibiscus-300: #f2a362;
--color-orange-hibiscus-400: #e18432;
--color-orange-hibiscus-500: #cf6400;
--color-orange-hibiscus-600: #af5600;
--color-orange-hibiscus-700: #8c4400;
--color-orange-hibiscus-800: #693000;
--color-orange-hibiscus-900: #4a2100;
--color-orange-hibiscus-950: #301000;
}SCSS
$orange-hibiscus: #ff9a45;
$orange-hibiscus-rgb: 255, 154, 69;
$orange-hibiscus-light: mix(#fff, $orange-hibiscus, 20%);
$orange-hibiscus-dark: mix(#000, $orange-hibiscus, 20%);
.element {
color: $orange-hibiscus;
box-shadow: 0 0 0 2px rgba($orange-hibiscus, 0.35);
}