Adlandırılmış renk · #1C3378
Twilight Express
Twilight Express, #1C3378: rgb(28 51 120), hsl(225 62% 29%), oklch(0.348 0.122 266.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Twilight Express color name →
#1C3378
oklch(0.348 0.122 266.2)
Renk dönüşümleri
- HEX
- #1c3378
- RGB
- rgb(28 51 120)
- HSL
- hsl(225 62% 29%)
- HWB
- hwb(225 11% 53%)
- OKLCH
- oklch(0.348 0.122 266.2)
- OKLab
- oklab(0.348 -0.008 -0.121)
- CIE Lab
- lab(22.9 11.94 -43)
- LCH
- lch(22.9 44.62 285.5)
- CMYK
- cmyk(77% 58% 0% 53%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 2F4786
- 435A94
- 586EA2
- 6E82AF
- 8596BD
- 9CAACA
- B4BFD7
- CDD4E5
- E6E9F2
Koyu tonlar
- 172B67
- 122357
- 0D1C48
- 081439
- 050D2A
- 02071D
- 010310
- 000105
- 000001
Gri tonlar
- 253C7A
- 2E447B
- 384C7C
- 42537E
- 4C5B7F
- 56637F
- 606A80
- 6B7180
- 757980
Renk uyumları
Tamamlayıcı +180°
- 1C3378
Twilight Express
- 4A3700
≈ Night in the Woods
Analog -30° +30°
- 1C3378
Twilight Express
- 003F5B
≈ Maniac Mansion
- 412770
≈ Clear Purple
Üçlü +120° +240°
- 1C3378
Twilight Express
- 6B1414
≈ Sanguine
- 004712
≈ Borg Drone
Bölünmüş tamamlayıcı +150° +210°
- 1C3378
Twilight Express
- 5A2C00
≈ Count Chocula
- 383E00
≈ Dark Olive
Dörtlü +90° +180° +270°
- 1C3378
Twilight Express
- 66133C
≈ Spanish Purple
- 4A3700
≈ Night in the Woods
- 004539
≈ UP Forest Green
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 11.70:1 · APCA Lc 96
Ag
FailSiyah üzerinde
WCAG 1.79:1 · APCA Lc 0
En iyi metin rengi: #FFFFFF
WCAG 11.70:1 (AAA) · APCA Lc 96
Contrast pairs
Kod parçacıkları
CSS
:root {
--twilight-express: #1c3378;
--twilight-express-rgb: 28 51 120;
--twilight-express-oklch: oklch(0.348 0.122 266.2);
}
.element {
color: var(--twilight-express);
background-color: hsl(225 62% 29%);
border-color: oklch(0.348 0.122 266.2);
}Tailwind CSS v4
@theme {
--color-twilight-express: #1c3378;
--color-twilight-express-50: #e6f5ff;
--color-twilight-express-100: #d6e7ff;
--color-twilight-express-200: #bed3ff;
--color-twilight-express-300: #9db5f6;
--color-twilight-express-400: #7d9ce7;
--color-twilight-express-500: #6082d6;
--color-twilight-express-600: #526eb5;
--color-twilight-express-700: #415891;
--color-twilight-express-800: #2d416c;
--color-twilight-express-900: #1e2d4c;
--color-twilight-express-950: #0e1932;
}SCSS
$twilight-express: #1c3378;
$twilight-express-rgb: 28, 51, 120;
$twilight-express-light: mix(#fff, $twilight-express, 20%);
$twilight-express-dark: mix(#000, $twilight-express, 20%);
.element {
color: $twilight-express;
box-shadow: 0 0 0 2px rgba($twilight-express, 0.35);
}