Adlandırılmış renk · #4455FF
Hooloovoo Blue
Hooloovoo Blue, #4455FF: rgb(68 85 255), hsl(235 100% 63%), oklch(0.551 0.248 270.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Hooloovoo Blue color name →
#4455FF
oklch(0.551 0.248 270.9)
Renk dönüşümleri
- HEX
- #4455ff
- RGB
- rgb(68 85 255)
- HSL
- hsl(235 100% 63%)
- HWB
- hwb(235 27% 0%)
- OKLCH
- oklch(0.551 0.248 270.9)
- OKLab
- oklab(0.551 0.004 -0.248)
- CIE Lab
- lab(44.03 38.81 -87.94)
- LCH
- lch(44.03 96.13 293.8)
- CMYK
- cmyk(73% 67% 0% 0%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 526BFF
- 627EFF
- 7390FF
- 85A1FF
- 98B1FF
- ACC1FF
- C0D1FF
- D5E0FF
- EAF0FF
Koyu tonlar
- 3A49DE
- 303DBE
- 26319E
- 1D2680
- 141C63
- 0C1148
- 05082E
- 020216
- 000003
Gri tonlar
- 485DF3
- 4D64E7
- 526ADB
- 586FCE
- 5E73C2
- 6477B5
- 6B7AA9
- 727C9C
- 797E8E
Renk uyumları
Tamamlayıcı +180°
- 4455FF
Hooloovoo Blue
- 8A6E00
≈ Vermin Brown
Analog -30° +30°
- 4455FF
Hooloovoo Blue
- 0079B5
≈ Deep River
- 8E34E8
≈ Bright Blue Violet
Üçlü +120° +240°
- 4455FF
Hooloovoo Blue
- D21A00
≈ Dragon’s Breath
- 008941
≈ The Wild Apothecary
Bölünmüş tamamlayıcı +150° +210°
- 4455FF
Hooloovoo Blue
- A65D00
≈ Raw Umber
- 677C00
≈ Birch Leaf Green
Dörtlü +90° +180° +270°
- 4455FF
Hooloovoo Blue
- CE006A
≈ Vampiric Bloodlust
- 8A6E00
≈ Vermin Brown
- 008475
≈ Summer Turquoise
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.26:1 · APCA Lc 75
Ag
FailSiyah üzerinde
WCAG 3.98:1 · APCA Lc 26
En iyi metin rengi: #FFFFFF
WCAG 5.26:1 (AA) · APCA Lc 75
Contrast pairs
Kod parçacıkları
CSS
:root {
--hooloovoo-blue: #4455ff;
--hooloovoo-blue-rgb: 68 85 255;
--hooloovoo-blue-oklch: oklch(0.551 0.248 270.9);
}
.element {
color: var(--hooloovoo-blue);
background-color: hsl(235 100% 63%);
border-color: oklch(0.551 0.248 270.9);
}Tailwind CSS v4
@theme {
--color-hooloovoo-blue: #4455ff;
--color-hooloovoo-blue-50: #ddf1ff;
--color-hooloovoo-blue-100: #cce3ff;
--color-hooloovoo-blue-200: #b1ccff;
--color-hooloovoo-blue-300: #8faaff;
--color-hooloovoo-blue-400: #6c8bff;
--color-hooloovoo-blue-500: #5267ff;
--color-hooloovoo-blue-600: #4558f8;
--color-hooloovoo-blue-700: #3747c8;
--color-hooloovoo-blue-800: #223496;
--color-hooloovoo-blue-900: #16246b;
--color-hooloovoo-blue-950: #09114a;
}SCSS
$hooloovoo-blue: #4455ff;
$hooloovoo-blue-rgb: 68, 85, 255;
$hooloovoo-blue-light: mix(#fff, $hooloovoo-blue, 20%);
$hooloovoo-blue-dark: mix(#000, $hooloovoo-blue, 20%);
.element {
color: $hooloovoo-blue;
box-shadow: 0 0 0 2px rgba($hooloovoo-blue, 0.35);
}