Nazwany kolor · #276DD6
Enchanting Sapphire
Enchanting Sapphire to #276DD6: rgb(39 109 214), hsl(216 69% 50%), oklch(0.551 0.176 258.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Enchanting Sapphire color name →
#276DD6
oklch(0.551 0.176 258.9)
Konwersje koloru
- HEX
- #276dd6
- RGB
- rgb(39 109 214)
- HSL
- hsl(216 69% 50%)
- HWB
- hwb(216 15% 16%)
- OKLCH
- oklch(0.551 0.176 258.9)
- OKLab
- oklab(0.551 -0.034 -0.173)
- CIE Lab
- lab(46.3 8.47 -61.3)
- LCH
- lch(46.3 61.89 277.9)
- CMYK
- cmyk(82% 49% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 3F7DDB
- 558CE1
- 6A9AE6
- 7FA9EA
- 94B8EE
- A9C6F2
- BED4F6
- D4E2F9
- E9F1FC
Odcienie ciemniejsze
- 205EBA
- 1A4F9E
- 144184
- 0E336A
- 082652
- 04193B
- 020D25
- 010410
- 000102
Tony
- 3370CE
- 3E73C6
- 4776BE
- 5078B5
- 597AAD
- 617BA4
- 697D9C
- 717E93
- 787F89
Harmonie kolorów
Komplementarna +180°
- 276DD6
Enchanting Sapphire
- 956800
≈ Gamboge Brown
Analogowa -30° +30°
- 276DD6
Enchanting Sapphire
- 007DA4
≈ Bleu Ciel
- 7259D0
≈ Astro Purple
Triada +120° +240°
- 276DD6
Enchanting Sapphire
- C33747
≈ Rococco Red
- 308800
≈ Green Bell Pepper
Komplementarna rozszczepiona +150° +210°
- 276DD6
Enchanting Sapphire
- B35100
≈ Skrag Brown
- 787600
≈ Mongolian Plateau
Tetrada +90° +180° +270°
- 276DD6
Enchanting Sapphire
- B73A82
≈ Very Berry
- 956800
≈ Gamboge Brown
- 008666
≈ Spectral Green
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.94:1 · APCA Lc 74
Ag
FailNa czerni
WCAG 4.24:1 · APCA Lc 28
Najlepszy kolor tekstu: #FFFFFF
WCAG 4.94:1 (AA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
CSS
:root {
--enchanting-sapphire: #276dd6;
--enchanting-sapphire-rgb: 39 109 214;
--enchanting-sapphire-oklch: oklch(0.551 0.176 258.9);
}
.element {
color: var(--enchanting-sapphire);
background-color: hsl(216 69% 50%);
border-color: oklch(0.551 0.176 258.9);
}Tailwind CSS v4
@theme {
--color-enchanting-sapphire: #276dd6;
--color-enchanting-sapphire-50: #d9f7ff;
--color-enchanting-sapphire-100: #c7e9ff;
--color-enchanting-sapphire-200: #a9d5ff;
--color-enchanting-sapphire-300: #83b7ff;
--color-enchanting-sapphire-400: #5a9dff;
--color-enchanting-sapphire-500: #3381f8;
--color-enchanting-sapphire-600: #2c6ed1;
--color-enchanting-sapphire-700: #2358a8;
--color-enchanting-sapphire-800: #12417e;
--color-enchanting-sapphire-900: #0b2d59;
--color-enchanting-sapphire-950: #01193c;
}SCSS
$enchanting-sapphire: #276dd6;
$enchanting-sapphire-rgb: 39, 109, 214;
$enchanting-sapphire-light: mix(#fff, $enchanting-sapphire, 20%);
$enchanting-sapphire-dark: mix(#000, $enchanting-sapphire, 20%);
.element {
color: $enchanting-sapphire;
box-shadow: 0 0 0 2px rgba($enchanting-sapphire, 0.35);
}