Adlandırılmış renk · #6487B0
Perfect Periwinkle
Perfect Periwinkle, #6487B0: rgb(100 135 176), hsl(212 32% 54%), oklch(0.613 0.074 252.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? → · Perfect Periwinkle color name →
#6487B0
oklch(0.613 0.074 252.9)
Renk dönüşümleri
- HEX
- #6487b0
- RGB
- rgb(100 135 176)
- HSL
- hsl(212 32% 54%)
- HWB
- hwb(212 39% 31%)
- OKLCH
- oklch(0.613 0.074 252.9)
- OKLab
- oklab(0.613 -0.022 -0.071)
- CIE Lab
- lab(54.9 -4.32 -25.9)
- LCH
- lch(54.9 26.25 260.5)
- CMYK
- cmyk(43% 23% 0% 31%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 7393B8
- 829EC0
- 91AAC8
- A0B6D0
- AFC2D8
- BFCEE0
- CFDAE8
- DFE6EF
- EFF3F7
Koyu tonlar
- 567599
- 486382
- 3B516C
- 2E4156
- 223142
- 16212E
- 0B131C
- 03060B
- 000101
Gri tonlar
- 6786AB
- 6A86A7
- 6D85A2
- 70859D
- 738498
- 768394
- 78828F
- 7B828A
- 7D8185
Renk uyumları
Tamamlayıcı +180°
- 6487B0
Perfect Periwinkle
- A07D51
≈ Fantan
Analog -30° +30°
- 6487B0
Perfect Periwinkle
- 4E8EA5
≈ Aegean Sea
- 7D7FB0
≈ Astro Zinger
Üçlü +120° +240°
- 6487B0
Perfect Periwinkle
- AC7278
≈ French Marron
- 738E60
≈ Four Leaf Clover
Bölünmüş tamamlayıcı +150° +210°
- 6487B0
Perfect Periwinkle
- AA7660
≈ Clay Court
- 8C8651
≈ Dried Bay Leaf
Dörtlü +90° +180° +270°
- 6487B0
Perfect Periwinkle
- A47290
≈ Poise
- A07D51
≈ Fantan
- 599277
≈ Deep Grass Green
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.72:1 · APCA Lc 65
Ag
AASiyah üzerinde
WCAG 5.63:1 · APCA Lc 37
En iyi metin rengi: #000000
WCAG 5.63:1 (AA) · APCA Lc 37
Contrast pairs
Kod parçacıkları
CSS
:root {
--perfect-periwinkle: #6487b0;
--perfect-periwinkle-rgb: 100 135 176;
--perfect-periwinkle-oklch: oklch(0.613 0.074 252.9);
}
.element {
color: var(--perfect-periwinkle);
background-color: hsl(212 32% 54%);
border-color: oklch(0.613 0.074 252.9);
}Tailwind CSS v4
@theme {
--color-perfect-periwinkle: #6487b0;
--color-perfect-periwinkle-50: #e7f7ff;
--color-perfect-periwinkle-100: #d8eaff;
--color-perfect-periwinkle-200: #bfd6f4;
--color-perfect-periwinkle-300: #9ebadd;
--color-perfect-periwinkle-400: #7fa1ca;
--color-perfect-periwinkle-500: #6289b6;
--color-perfect-periwinkle-600: #54749a;
--color-perfect-periwinkle-700: #435d7c;
--color-perfect-periwinkle-800: #2f445b;
--color-perfect-periwinkle-900: #202f40;
--color-perfect-periwinkle-950: #0f1c29;
}SCSS
$perfect-periwinkle: #6487b0;
$perfect-periwinkle-rgb: 100, 135, 176;
$perfect-periwinkle-light: mix(#fff, $perfect-periwinkle, 20%);
$perfect-periwinkle-dark: mix(#000, $perfect-periwinkle, 20%);
.element {
color: $perfect-periwinkle;
box-shadow: 0 0 0 2px rgba($perfect-periwinkle, 0.35);
}