Adlandırılmış renk · #8855FF
Purple Honeycreeper
Purple Honeycreeper, #8855FF: rgb(136 85 255), hsl(258 100% 67%), oklch(0.6 0.238 291.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Purple Honeycreeper color name →
#8855FF
oklch(0.6 0.238 291.3)
Renk dönüşümleri
- HEX
- #8855ff
- RGB
- rgb(136 85 255)
- HSL
- hsl(258 100% 67%)
- HWB
- hwb(258 33% 0%)
- OKLCH
- oklch(0.6 0.238 291.3)
- OKLab
- oklab(0.6 0.086 -0.221)
- CIE Lab
- lab(49.56 50.64 -78.65)
- LCH
- lch(49.56 93.54 302.8)
- CMYK
- cmyk(47% 67% 0% 0%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 926AFF
- 9C7DFF
- A78EFF
- B29FFF
- BEB0FF
- CBC0FF
- D7D0FF
- E4E0FF
- F1EFFF
Koyu tonlar
- 7549DE
- 633DBE
- 52319E
- 412680
- 311C63
- 221148
- 13082E
- 060216
- 010003
Gri tonlar
- 865DF3
- 8563E6
- 8369DA
- 826ECE
- 8172C1
- 8176B5
- 8079A8
- 807C9B
- 807E8E
Renk uyumları
Tamamlayıcı +180°
- 8855FF
Purple Honeycreeper
- 848700
≈ Krypton Green
Analog -30° +30°
- 8855FF
Purple Honeycreeper
- 2B76FF
≈ Hailey Blue
- BC3AD3
≈ Ultraviolet Berl
Üçlü +120° +240°
- 8855FF
Purple Honeycreeper
- C65F00
≈ Kvass
- 009677
≈ Pool Table
Bölünmüş tamamlayıcı +150° +210°
- 8855FF
Purple Honeycreeper
- A57700
≈ Bronze
- 1E9B00
≈ Space Invader
Dörtlü +90° +180° +270°
- 8855FF
Purple Honeycreeper
- ED0C3B
≈ Red Ribbon
- 848700
≈ Krypton Green
- 009299
≈ Splashy
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.38:1 · APCA Lc 70
Ag
AASiyah üzerinde
WCAG 4.79:1 · APCA Lc 32
En iyi metin rengi: #000000
WCAG 4.79:1 (AA) · APCA Lc 32
Contrast pairs
Kod parçacıkları
CSS
:root {
--purple-honeycreeper: #8855ff;
--purple-honeycreeper-rgb: 136 85 255;
--purple-honeycreeper-oklch: oklch(0.6 0.238 291.3);
}
.element {
color: var(--purple-honeycreeper);
background-color: hsl(258 100% 67%);
border-color: oklch(0.6 0.238 291.3);
}Tailwind CSS v4
@theme {
--color-purple-honeycreeper: #8855ff;
--color-purple-honeycreeper-50: #f7e9ff;
--color-purple-honeycreeper-100: #ebd9ff;
--color-purple-honeycreeper-200: #d9c0ff;
--color-purple-honeycreeper-300: #be9bff;
--color-purple-honeycreeper-400: #a47aff;
--color-purple-honeycreeper-500: #9053ff;
--color-purple-honeycreeper-600: #7948e7;
--color-purple-honeycreeper-700: #613aba;
--color-purple-honeycreeper-800: #452a8d;
--color-purple-honeycreeper-900: #2f1c64;
--color-purple-honeycreeper-950: #1c0a45;
}SCSS
$purple-honeycreeper: #8855ff;
$purple-honeycreeper-rgb: 136, 85, 255;
$purple-honeycreeper-light: mix(#fff, $purple-honeycreeper, 20%);
$purple-honeycreeper-dark: mix(#000, $purple-honeycreeper, 20%);
.element {
color: $purple-honeycreeper;
box-shadow: 0 0 0 2px rgba($purple-honeycreeper, 0.35);
}