Adlandırılmış renk · #484A80
Highlands Twilight
Highlands Twilight, #484A80: rgb(72 74 128), hsl(238 28% 39%), oklch(0.433 0.088 280.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Highlands Twilight color name →
#484A80
oklch(0.433 0.088 280.4)
Renk dönüşümleri
- HEX
- #484a80
- RGB
- rgb(72 74 128)
- HSL
- hsl(238 28% 39%)
- HWB
- hwb(238 28% 50%)
- OKLCH
- oklch(0.433 0.088 280.4)
- OKLab
- oklab(0.433 0.016 -0.087)
- CIE Lab
- lab(33.26 10.63 -31.23)
- LCH
- lch(33.26 32.99 288.8)
- CMYK
- cmyk(44% 42% 0% 50%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 585B8D
- 696C99
- 7A7DA6
- 8C8FB3
- 9EA1BF
- B0B3CC
- C4C6D9
- D7D9E5
- EBECF2
Koyu tonlar
- 3D3F6E
- 33355D
- 292A4D
- 1F203D
- 16172E
- 0D0E1F
- 060612
- 020206
- 000001
Gri tonlar
- 4D5080
- 525581
- 585B81
- 5D6081
- 636581
- 686B81
- 6E7081
- 747581
- 7A7B81
Renk uyumları
Tamamlayıcı +180°
- 484A80
Highlands Twilight
- 5C5104
≈ Douro
Analog -30° +30°
- 484A80
Highlands Twilight
- 27537F
≈ Blueberry Twist
- 604275
≈ Drifting Violet
Üçlü +120° +240°
- 484A80
Highlands Twilight
- 793E29
≈ Stone Age Queen
- 145F40
≈ Greenbriar
Bölünmüş tamamlayıcı +150° +210°
- 484A80
Highlands Twilight
- 6F470B
≈ Antique Bronze
- 405A22
≈ Obscure Olive
Dörtlü +90° +180° +270°
- 484A80
Highlands Twilight
- 793A45
≈ Cordova Burgundy
- 5C5104
≈ Douro
- 005D5A
≈ Dark Turquoise
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 8.18:1 · APCA Lc 88
Ag
FailSiyah üzerinde
WCAG 2.56:1 · APCA Lc 14
En iyi metin rengi: #FFFFFF
WCAG 8.18:1 (AAA) · APCA Lc 88
Contrast pairs
Kod parçacıkları
CSS
:root {
--highlands-twilight: #484a80;
--highlands-twilight-rgb: 72 74 128;
--highlands-twilight-oklch: oklch(0.433 0.088 280.4);
}
.element {
color: var(--highlands-twilight);
background-color: hsl(238 28% 39%);
border-color: oklch(0.433 0.088 280.4);
}Tailwind CSS v4
@theme {
--color-highlands-twilight: #484a80;
--color-highlands-twilight-50: #f1f3ff;
--color-highlands-twilight-100: #e3e5ff;
--color-highlands-twilight-200: #ced0fa;
--color-highlands-twilight-300: #b0b2e4;
--color-highlands-twilight-400: #9499d2;
--color-highlands-twilight-500: #7b7fc0;
--color-highlands-twilight-600: #686ca2;
--color-highlands-twilight-700: #535682;
--color-highlands-twilight-800: #3b3f61;
--color-highlands-twilight-900: #292b44;
--color-highlands-twilight-950: #17192c;
}SCSS
$highlands-twilight: #484a80;
$highlands-twilight-rgb: 72, 74, 128;
$highlands-twilight-light: mix(#fff, $highlands-twilight, 20%);
$highlands-twilight-dark: mix(#000, $highlands-twilight, 20%);
.element {
color: $highlands-twilight;
box-shadow: 0 0 0 2px rgba($highlands-twilight, 0.35);
}