Adlandırılmış renk · #3E62AD
Kakitsubata Blue
Kakitsubata Blue, #3E62AD: rgb(62 98 173), hsl(221 47% 46%), oklch(0.507 0.126 263.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Kakitsubata Blue color name →
#3E62AD
oklch(0.507 0.126 263.3)
Renk dönüşümleri
- HEX
- #3e62ad
- RGB
- rgb(62 98 173)
- HSL
- hsl(221 47% 46%)
- HWB
- hwb(221 24% 32%)
- OKLCH
- oklch(0.507 0.126 263.3)
- OKLab
- oklab(0.507 -0.015 -0.125)
- CIE Lab
- lab(41.78 5.88 -44.83)
- LCH
- lch(41.78 45.22 277.5)
- CMYK
- cmyk(64% 43% 0% 32%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 5072B6
- 6281BF
- 7490C7
- 87A0D0
- 9AB0D8
- AEBFE0
- C2CFE8
- D6DFF0
- EAEFF8
Koyu tonlar
- 355496
- 2B477F
- 233A6A
- 1A2D55
- 122141
- 0A162D
- 040B1B
- 01030B
- 000001
Gri tonlar
- 4566A9
- 4B69A5
- 526CA1
- 59709D
- 5F7398
- 667694
- 6C788F
- 737B8A
- 797E85
Renk uyumları
Tamamlayıcı +180°
- 3E62AD
Kakitsubata Blue
- 825F00
≈ Ground Earth
Analog -30° +30°
- 3E62AD
Kakitsubata Blue
- 006E98
≈ Disarm
- 6A54A6
≈ Prophet Violet
Üçlü +120° +240°
- 3E62AD
Kakitsubata Blue
- A14342
≈ Tandoori Spice
- 317730
≈ Japanese Laurel
Bölünmüş tamamlayıcı +150° +210°
- 3E62AD
Kakitsubata Blue
- 9B4D05
≈ Burnt Bagel
- 666C00
≈ Brownish Green
Dörtlü +90° +180° +270°
- 3E62AD
Kakitsubata Blue
- 9A426B
≈ Satsuma Imo Red
- 825F00
≈ Ground Earth
- 007760
≈ Tropical Rainforest
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.90:1 · APCA Lc 79
Ag
FailSiyah üzerinde
WCAG 3.55:1 · APCA Lc 23
En iyi metin rengi: #FFFFFF
WCAG 5.90:1 (AA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
CSS
:root {
--kakitsubata-blue: #3e62ad;
--kakitsubata-blue-rgb: 62 98 173;
--kakitsubata-blue-oklch: oklch(0.507 0.126 263.3);
}
.element {
color: var(--kakitsubata-blue);
background-color: hsl(221 47% 46%);
border-color: oklch(0.507 0.126 263.3);
}Tailwind CSS v4
@theme {
--color-kakitsubata-blue: #3e62ad;
--color-kakitsubata-blue-50: #e4f5ff;
--color-kakitsubata-blue-100: #d4e8ff;
--color-kakitsubata-blue-200: #bad4ff;
--color-kakitsubata-blue-300: #98b6f9;
--color-kakitsubata-blue-400: #779de9;
--color-kakitsubata-blue-500: #5983d9;
--color-kakitsubata-blue-600: #4c6fb7;
--color-kakitsubata-blue-700: #3c5993;
--color-kakitsubata-blue-800: #29416e;
--color-kakitsubata-blue-900: #1b2d4d;
--color-kakitsubata-blue-950: #0c1a33;
}SCSS
$kakitsubata-blue: #3e62ad;
$kakitsubata-blue-rgb: 62, 98, 173;
$kakitsubata-blue-light: mix(#fff, $kakitsubata-blue, 20%);
$kakitsubata-blue-dark: mix(#000, $kakitsubata-blue, 20%);
.element {
color: $kakitsubata-blue;
box-shadow: 0 0 0 2px rgba($kakitsubata-blue, 0.35);
}