Adlandırılmış renk · #307DD3
Soothing Sapphire
Soothing Sapphire, #307DD3: rgb(48 125 211), hsl(212 65% 51%), oklch(0.586 0.152 253.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? → · Soothing Sapphire color name →
#307DD3
oklch(0.586 0.152 253.9)
Renk dönüşümleri
- HEX
- #307dd3
- RGB
- rgb(48 125 211)
- HSL
- hsl(212 65% 51%)
- HWB
- hwb(212 19% 17%)
- OKLCH
- oklch(0.586 0.152 253.9)
- OKLab
- oklab(0.586 -0.042 -0.146)
- CIE Lab
- lab(51.05 -0.58 -52)
- LCH
- lch(51.05 52 269.4)
- CMYK
- cmyk(77% 41% 0% 17%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 488AD8
- 5D98DE
- 72A5E3
- 86B2E7
- 9ABFEC
- AECCF0
- C2D8F4
- D6E5F8
- EBF2FC
Koyu tonlar
- 286CB7
- 215B9C
- 1A4B82
- 133B69
- 0C2C51
- 061E3A
- 031124
- 010510
- 000102
Gri tonlar
- 3B7ECB
- 457FC3
- 4E80BB
- 5680B3
- 5E81AB
- 6581A2
- 6C819A
- 738192
- 7A8089
Renk uyumları
Tamamlayıcı +180°
- 307DD3
Soothing Sapphire
- A76F00
≈ Golden Hind
Analog -30° +30°
- 307DD3
Soothing Sapphire
- 0089AC
≈ Corfu Waters
- 736CD2
≈ C64 Purple
Üçlü +120° +240°
- 307DD3
Soothing Sapphire
- C54E61
≈ Claret Red
- 548E20
≈ Vida Loca
Bölünmüş tamamlayıcı +150° +210°
- 307DD3
Soothing Sapphire
- C35822
≈ Grieving Daylily
- 897F00
≈ Olive
Dörtlü +90° +180° +270°
- 307DD3
Soothing Sapphire
- B75292
≈ Magenta Memoir
- A76F00
≈ Golden Hind
- 009368
≈ Viridian
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.20:1 · APCA Lc 69
Ag
AASiyah üzerinde
WCAG 4.99:1 · APCA Lc 33
En iyi metin rengi: #000000
WCAG 4.99:1 (AA) · APCA Lc 33
Contrast pairs
Kod parçacıkları
CSS
:root {
--soothing-sapphire: #307dd3;
--soothing-sapphire-rgb: 48 125 211;
--soothing-sapphire-oklch: oklch(0.586 0.152 253.9);
}
.element {
color: var(--soothing-sapphire);
background-color: hsl(212 65% 51%);
border-color: oklch(0.586 0.152 253.9);
}Tailwind CSS v4
@theme {
--color-soothing-sapphire: #307dd3;
--color-soothing-sapphire-50: #d9f8ff;
--color-soothing-sapphire-100: #c7ebff;
--color-soothing-sapphire-200: #a9d7ff;
--color-soothing-sapphire-300: #82baff;
--color-soothing-sapphire-400: #5aa1f5;
--color-soothing-sapphire-500: #2f87e7;
--color-soothing-sapphire-600: #2a72c3;
--color-soothing-sapphire-700: #215b9d;
--color-soothing-sapphire-800: #114475;
--color-soothing-sapphire-900: #0b2f52;
--color-soothing-sapphire-950: #001b37;
}SCSS
$soothing-sapphire: #307dd3;
$soothing-sapphire-rgb: 48, 125, 211;
$soothing-sapphire-light: mix(#fff, $soothing-sapphire, 20%);
$soothing-sapphire-dark: mix(#000, $soothing-sapphire, 20%);
.element {
color: $soothing-sapphire;
box-shadow: 0 0 0 2px rgba($soothing-sapphire, 0.35);
}