Nazwany kolor · #3399FF
Brilliant Azure
Brilliant Azure to #3399FF: rgb(51 153 255), hsl(210 100% 60%), oklch(0.676 0.176 252.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Brilliant Azure color name →
#3399FF
oklch(0.676 0.176 252.3)
Konwersje koloru
- HEX
- #3399ff
- RGB
- rgb(51 153 255)
- HSL
- hsl(210 100% 60%)
- HWB
- hwb(210 20% 0%)
- OKLCH
- oklch(0.676 0.176 252.3)
- OKLab
- oklab(0.676 -0.054 -0.168)
- CIE Lab
- lab(61.34 -2.18 -60.01)
- LCH
- lch(61.34 60.05 267.9)
- CMYK
- cmyk(80% 40% 0% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 4EA4FF
- 64AFFF
- 79B9FF
- 8DC4FF
- A0CEFF
- B3D8FF
- C6E2FF
- D9ECFF
- ECF5FF
Odcienie ciemniejsze
- 2B84DE
- 2370BE
- 1C5D9E
- 144A80
- 0D3863
- 072748
- 03172E
- 010816
- 000103
Tony
- 4097F2
- 4B95E6
- 5493D9
- 5C91CC
- 638FC0
- 6A8CB3
- 7089A7
- 76869A
- 7B838D
Harmonie kolorów
Komplementarna +180°
- 3399FF
Brilliant Azure
- CC8600
≈ Lobster Butter Sauce
Analogowa -30° +30°
- 3399FF
Brilliant Azure
- 00A7CE
≈ Gummy Dolphins
- 8984FF
≈ Periwinkle
Triada +120° +240°
- 3399FF
Brilliant Azure
- EE5F79
≈ Cherry Static
- 6BAC20
≈ Alpine Meadow
Komplementarna rozszczepiona +150° +210°
- 3399FF
Brilliant Azure
- ED6A2F
≈ Mandarin Orange
- A89900
≈ Nuclear Fallout
Tetrada +90° +180° +270°
- 3399FF
Brilliant Azure
- DD64B4
≈ Pink Charge
- CC8600
≈ Lobster Butter Sauce
- 00B27B
≈ Salsify Grass
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.94:1 · APCA Lc 55
Ag
AAANa czerni
WCAG 7.14:1 · APCA Lc 46
Najlepszy kolor tekstu: #000000
WCAG 7.14:1 (AAA) · APCA Lc 46
Contrast pairs
Fragmenty kodu
CSS
:root {
--brilliant-azure: #3399ff;
--brilliant-azure-rgb: 51 153 255;
--brilliant-azure-oklch: oklch(0.676 0.176 252.3);
}
.element {
color: var(--brilliant-azure);
background-color: hsl(210 100% 60%);
border-color: oklch(0.676 0.176 252.3);
}Tailwind CSS v4
@theme {
--color-brilliant-azure: #3399ff;
--color-brilliant-azure-50: #d3f9ff;
--color-brilliant-azure-100: #c0ecff;
--color-brilliant-azure-200: #9fd8ff;
--color-brilliant-azure-300: #75bbff;
--color-brilliant-azure-400: #44a1ff;
--color-brilliant-azure-500: #0086f6;
--color-brilliant-azure-600: #0072cf;
--color-brilliant-azure-700: #015ba7;
--color-brilliant-azure-800: #00437c;
--color-brilliant-azure-900: #002f58;
--color-brilliant-azure-950: #001b3b;
}SCSS
$brilliant-azure: #3399ff;
$brilliant-azure-rgb: 51, 153, 255;
$brilliant-azure-light: mix(#fff, $brilliant-azure, 20%);
$brilliant-azure-dark: mix(#000, $brilliant-azure, 20%);
.element {
color: $brilliant-azure;
box-shadow: 0 0 0 2px rgba($brilliant-azure, 0.35);
}