Adlandırılmış renk · #4E5180
Purple Navy
Purple Navy, #4E5180: rgb(78 81 128), hsl(236 24% 40%), oklch(0.453 0.076 280.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Purple Navy color name →
#4E5180
oklch(0.453 0.076 280.1)
Renk dönüşümleri
- HEX
- #4e5180
- RGB
- rgb(78 81 128)
- HSL
- hsl(236 24% 40%)
- HWB
- hwb(236 31% 50%)
- OKLCH
- oklch(0.453 0.076 280.1)
- OKLab
- oklab(0.453 0.013 -0.075)
- CIE Lab
- lab(35.8 8.31 -27.22)
- LCH
- lch(35.8 28.47 287)
- CMYK
- cmyk(39% 37% 0% 50%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 5E618D
- 6E7299
- 7F82A6
- 9093B2
- A1A5BF
- B3B6CC
- C6C8D8
- D9DAE5
- ECECF2
Koyu tonlar
- 43456E
- 383A5D
- 2D2F4D
- 23243D
- 191A2E
- 0F101F
- 070712
- 020206
- 000001
Gri tonlar
- 535680
- 575B81
- 5C5F81
- 616481
- 666981
- 6B6D81
- 707281
- 757781
- 7B7B80
Renk uyumları
Tamamlayıcı +180°
- 4E5180
Purple Navy
- 60571F
≈ Reptile Revenge
Analog -30° +30°
- 4E5180
Purple Navy
- 33597F
≈ Dark Blue
- 634A76
≈ Impulsive Purple
Üçlü +120° +240°
- 4E5180
Purple Navy
- 7A4735
≈ Tortoise Shell
- 2A6347
≈ Green Pea
Bölünmüş tamamlayıcı +150° +210°
- 4E5180
Purple Navy
- 714E22
≈ Chocolate Rain
- 485F2F
≈ Woodman
Dörtlü +90° +180° +270°
- 4E5180
Purple Navy
- 7A434C
≈ Stoic
- 60571F
≈ Reptile Revenge
- 076460
≈ Emerald Stone
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 7.46:1 · APCA Lc 86
Ag
FailSiyah üzerinde
WCAG 2.81:1 · APCA Lc 16
En iyi metin rengi: #FFFFFF
WCAG 7.46:1 (AAA) · APCA Lc 86
Contrast pairs
Kod parçacıkları
CSS
:root {
--purple-navy: #4e5180;
--purple-navy-rgb: 78 81 128;
--purple-navy-oklch: oklch(0.453 0.076 280.1);
}
.element {
color: var(--purple-navy);
background-color: hsl(236 24% 40%);
border-color: oklch(0.453 0.076 280.1);
}Tailwind CSS v4
@theme {
--color-purple-navy: #4e5180;
--color-purple-navy-50: #f1f3ff;
--color-purple-navy-100: #e3e5ff;
--color-purple-navy-200: #ced1f5;
--color-purple-navy-300: #b1b3de;
--color-purple-navy-400: #959acb;
--color-purple-navy-500: #7c81b8;
--color-purple-navy-600: #696d9c;
--color-purple-navy-700: #54577d;
--color-purple-navy-800: #3c405d;
--color-purple-navy-900: #292c41;
--color-purple-navy-950: #17192a;
}SCSS
$purple-navy: #4e5180;
$purple-navy-rgb: 78, 81, 128;
$purple-navy-light: mix(#fff, $purple-navy, 20%);
$purple-navy-dark: mix(#000, $purple-navy, 20%);
.element {
color: $purple-navy;
box-shadow: 0 0 0 2px rgba($purple-navy, 0.35);
}