Adlandırılmış renk · #E49977
Trumpet Flower
Trumpet Flower, #E49977: rgb(228 153 119), hsl(19 67% 68%), oklch(0.75 0.102 45.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Trumpet Flower color name →
#E49977
oklch(0.75 0.102 45.1)
Renk dönüşümleri
- HEX
- #e49977
- RGB
- rgb(228 153 119)
- HSL
- hsl(19 67% 68%)
- HWB
- hwb(19 47% 11%)
- OKLCH
- oklch(0.75 0.102 45.1)
- OKLab
- oklab(0.75 0.072 0.072)
- CIE Lab
- lab(70.33 26.18 29.92)
- LCH
- lch(70.33 39.76 48.8)
- CMYK
- cmyk(0% 33% 48% 11%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- E7A385
- EBAE92
- EEB8A0
- F1C2AD
- F4CCBB
- F6D6C8
- F9E0D6
- FBEBE3
- FDF5F1
Koyu tonlar
- C68467
- A97057
- 8D5D47
- 724A38
- 58382A
- 3F271C
- 281710
- 120805
- 030101
Gri tonlar
- DA9778
- D0957A
- C6927B
- BC907C
- B28D7D
- A88B7E
- 9E887E
- 94867F
- 8A8380
Renk uyumları
Tamamlayıcı +180°
- E49977
Trumpet Flower
- 5DBBDE
≈ Clear Weather
Analog -30° +30°
- E49977
Trumpet Flower
- E79399
≈ Marker Pink
- D4A561
≈ Burnside
Üçlü +120° +240°
- E49977
Trumpet Flower
- 6AC29E
≈ Gem Silica
- A7A5EC
≈ Cold Lips
Bölünmüş tamamlayıcı +150° +210°
- E49977
Trumpet Flower
- 50C2C2
≈ Gem Turquoise
- 82B1EE
≈ Fly Away
Dörtlü +90° +180° +270°
- E49977
Trumpet Flower
- 92BD7B
≈ Sago Garden
- 5DBBDE
≈ Clear Weather
- C69ADA
≈ Mauve Mist
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.30:1 · APCA Lc 45
Ag
AAASiyah üzerinde
WCAG 9.12:1 · APCA Lc 57
En iyi metin rengi: #000000
WCAG 9.12:1 (AAA) · APCA Lc 57
Contrast pairs
Kod parçacıkları
CSS
:root {
--trumpet-flower: #e49977;
--trumpet-flower-rgb: 228 153 119;
--trumpet-flower-oklch: oklch(0.75 0.102 45.1);
}
.element {
color: var(--trumpet-flower);
background-color: hsl(19 67% 68%);
border-color: oklch(0.75 0.102 45.1);
}Tailwind CSS v4
@theme {
--color-trumpet-flower: #e49977;
--color-trumpet-flower-50: #ffeddd;
--color-trumpet-flower-100: #ffdecb;
--color-trumpet-flower-200: #fac8af;
--color-trumpet-flower-300: #e4a88b;
--color-trumpet-flower-400: #d18b6b;
--color-trumpet-flower-500: #bd6f4a;
--color-trumpet-flower-600: #a05e3f;
--color-trumpet-flower-700: #804b32;
--color-trumpet-flower-800: #603624;
--color-trumpet-flower-900: #432518;
--color-trumpet-flower-950: #2b1309;
}SCSS
$trumpet-flower: #e49977;
$trumpet-flower-rgb: 228, 153, 119;
$trumpet-flower-light: mix(#fff, $trumpet-flower, 20%);
$trumpet-flower-dark: mix(#000, $trumpet-flower, 20%);
.element {
color: $trumpet-flower;
box-shadow: 0 0 0 2px rgba($trumpet-flower, 0.35);
}