En yakın adlandırılmış renk · #6783F3
#6783F3
En yakın adlandırılmış renk: Pan Purple
#6783F3 (rgb(103 131 243), hsl(228 85% 68%), oklch(0.643 0.17 270.5)) en çok Pan Purple adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#6783F3
oklch(0.643 0.17 270.5)
Renk dönüşümleri
- HEX
- #6783f3
- RGB
- rgb(103 131 243)
- HSL
- hsl(228 85% 68%)
- HWB
- hwb(228 40% 5%)
- OKLCH
- oklch(0.643 0.17 270.5)
- OKLab
- oklab(0.643 0.001 -0.17)
- CIE Lab
- lab(56.8 15.22 -60.5)
- LCH
- lch(56.8 62.39 284.1)
- CMYK
- cmyk(58% 46% 0% 5%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 7590F5
- 839DF8
- 91AAF9
- A0B6FB
- AFC2FD
- BFCFFE
- CFDBFE
- DFE7FF
- EFF3FF
Koyu tonlar
- 5971D3
- 4B60B4
- 3D4F97
- 303F7A
- 232F5E
- 172044
- 0C122B
- 040614
- 000103
Gri tonlar
- 6984E8
- 6C84DC
- 6E84D1
- 7084C6
- 7384BA
- 7684AF
- 7883A3
- 7B8298
- 7D818C
Renk uyumları
Tamamlayıcı +180°
- 6783F3
Pan Purple
- AC8900
≈ Strong Mustard
Analog -30° +30°
- 6783F3
Pan Purple
- 0096DE
≈ Atmosphere
- 9F70E3
≈ Violet Voltage
Üçlü +120° +240°
- 6783F3
Pan Purple
- E15D4A
≈ Pimento
- 16A852
≈ Liberty Green
Bölünmüş tamamlayıcı +150° +210°
- 6783F3
Pan Purple
- CD7300
≈ Tree Sap
- 819A00
≈ BioShock
Dörtlü +90° +180° +270°
- 6783F3
Pan Purple
- DB5888
≈ Blush d’Amour
- AC8900
≈ Strong Mustard
- 00A490
≈ Fishy House
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.43:1 · APCA Lc 62
Ag
AASiyah üzerinde
WCAG 6.11:1 · APCA Lc 40
En iyi metin rengi: #000000
WCAG 6.11:1 (AA) · APCA Lc 40
Contrast pairs
Kod parçacıkları
CSS
:root {
--pan-purple: #6783f3;
--pan-purple-rgb: 103 131 243;
--pan-purple-oklch: oklch(0.643 0.17 270.5);
}
.element {
color: var(--pan-purple);
background-color: hsl(228 85% 68%);
border-color: oklch(0.643 0.17 270.5);
}Tailwind CSS v4
@theme {
--color-pan-purple: #6783f3;
--color-pan-purple-50: #e4f3ff;
--color-pan-purple-100: #d4e5ff;
--color-pan-purple-200: #bbd0ff;
--color-pan-purple-300: #9ab1ff;
--color-pan-purple-400: #7996ff;
--color-pan-purple-500: #5d79f5;
--color-pan-purple-600: #4f67ce;
--color-pan-purple-700: #3f53a6;
--color-pan-purple-800: #2a3d7c;
--color-pan-purple-900: #1c2a58;
--color-pan-purple-950: #0d173b;
}SCSS
$pan-purple: #6783f3;
$pan-purple-rgb: 103, 131, 243;
$pan-purple-light: mix(#fff, $pan-purple, 20%);
$pan-purple-dark: mix(#000, $pan-purple, 20%);
.element {
color: $pan-purple;
box-shadow: 0 0 0 2px rgba($pan-purple, 0.35);
}