色名 · #BF00FF
Electric Purple
Electric Purpleは#BF00FF：rgb(191 0 255)、hsl(285 100% 50%)、oklch(0.609 0.303 312.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Electric Purple color name →
#BF00FF
oklch(0.609 0.303 312.9)
カラー変換
- HEX
- #bf00ff
- RGB
- rgb(191 0 255)
- HSL
- hsl(285 100% 50%)
- HWB
- hwb(285 0% 0%)
- OKLCH
- oklch(0.609 0.303 312.9)
- OKLab
- oklab(0.609 0.207 -0.222)
- CIE Lab
- lab(49.07 82.93 -79.04)
- LCH
- lch(49.07 114.56 316.4)
- CMYK
- cmyk(25% 100% 0% 0%)
ティント · シェード · トーン
ティント
- C640FF
- CD5EFF
- D476FF
- DB8CFF
- E1A1FF
- E7B4FF
- EEC7FF
- F4DAFF
- F9EDFF
シェード
- A600DE
- 8D00BE
- 75009E
- 5E0080
- 480063
- 330048
- 1F002E
- 0D0016
- 020003
トーン
- B92EF3
- B341E6
- AD4FDA
- A75ACE
- A163C1
- 9A6AB5
- 9471A8
- 8E769B
- 877B8E
カラーハーモニー
補色 +180°
- BF00FF
Electric Purple
- 579700
≈ Gecko’s Dream
類似色 -30° +30°
- BF00FF
Electric Purple
- 7765FF
≈ Blue Genie
- E100AB
≈ Aphroditean Fuchsia
トライアド +120° +240°
- BF00FF
Electric Purple
- B17400
≈ Philippine Gold
- 009694
≈ Intermezzo
スプリットコンプリメンタリー +150° +210°
- BF00FF
Electric Purple
- 928500
≈ Thicket Green
- 009B6C
≈ Jitterbug Jade
テトラード +90° +180° +270°
- BF00FF
Electric Purple
- D75300
≈ Raging Leaf
- 579700
≈ Gecko’s Dream
- 0091B4
≈ Cool Tide
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.50:1 · APCA Lc 69
Ag
AA黒の上
WCAG 4.65:1 · APCA Lc 33
最適な文字色: #000000
WCAG 4.65:1 (AA) · APCA Lc 33
Contrast pairs
コードスニペット
CSS
:root {
--electric-purple: #bf00ff;
--electric-purple-rgb: 191 0 255;
--electric-purple-oklch: oklch(0.609 0.303 312.9);
}
.element {
color: var(--electric-purple);
background-color: hsl(285 100% 50%);
border-color: oklch(0.609 0.303 312.9);
}Tailwind CSS v4
@theme {
--color-electric-purple: #bf00ff;
--color-electric-purple-50: #ffdbff;
--color-electric-purple-100: #ffc8ff;
--color-electric-purple-200: #ffa8ff;
--color-electric-purple-300: #f07cff;
--color-electric-purple-400: #da4cff;
--color-electric-purple-500: #c800ff;
--color-electric-purple-600: #a900e4;
--color-electric-purple-700: #8800b8;
--color-electric-purple-800: #63008c;
--color-electric-purple-900: #450063;
--color-electric-purple-950: #2d0045;
}SCSS
$electric-purple: #bf00ff;
$electric-purple-rgb: 191, 0, 255;
$electric-purple-light: mix(#fff, $electric-purple, 20%);
$electric-purple-dark: mix(#000, $electric-purple, 20%);
.element {
color: $electric-purple;
box-shadow: 0 0 0 2px rgba($electric-purple, 0.35);
}