色名 · #BB00DD
Capricious Purple
Capricious Purpleは#BB00DD：rgb(187 0 221)、hsl(291 100% 43%)、oklch(0.578 0.278 319.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Capricious Purple color name →
#BB00DD
oklch(0.578 0.278 319.4)
カラー変換
- HEX
- #bb00dd
- RGB
- rgb(187 0 221)
- HSL
- hsl(291 100% 43%)
- HWB
- hwb(291 0% 13%)
- OKLCH
- oklch(0.578 0.278 319.4)
- OKLab
- oklab(0.578 0.211 -0.181)
- CIE Lab
- lab(46.23 77.98 -64.54)
- LCH
- lch(46.23 101.22 320.4)
- CMYK
- cmyk(15% 100% 0% 13%)
ティント · シェード · トーン
ティント
- C33CE2
- CB59E6
- D371EB
- DA87EF
- E19CF2
- E8B0F6
- EEC4F8
- F4D8FB
- FAEBFD
シェード
- A200C0
- 8A00A4
- 730088
- 5C006E
- 460055
- 32003D
- 1F0026
- 0D0011
- 020002
トーン
- B62BD4
- B13DCB
- AB4BC2
- A656BA
- A05FB0
- 9A67A7
- 946E9E
- 8E7594
- 877A8A
カラーハーモニー
補色 +180°
- BB00DD
Capricious Purple
- 309200
≈ Yushan Green
類似色 -30° +30°
- BB00DD
Capricious Purple
- 7F4BFF
≈ Sweet Escape
- D6008F
≈ The Art of Seduction
トライアド +120° +240°
- BB00DD
Capricious Purple
- 9F7000
≈ Barbarian Leather
- 008B90
≈ India Blue
スプリットコンプリメンタリー +150° +210°
- BB00DD
Capricious Purple
- 807F00
≈ Olive
- 008F6F
≈ Observatory
テトラード +90° +180° +270°
- BB00DD
Capricious Purple
- BF5700
≈ Sebright Chicken
- 309200
≈ Yushan Green
- 0085B0
≈ Lyrebird
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.05:1 · APCA Lc 72
Ag
Fail黒の上
WCAG 4.15:1 · APCA Lc 29
最適な文字色: #FFFFFF
WCAG 5.05:1 (AA) · APCA Lc 72
Contrast pairs
コードスニペット
CSS
:root {
--capricious-purple: #bb00dd;
--capricious-purple-rgb: 187 0 221;
--capricious-purple-oklch: oklch(0.578 0.278 319.4);
}
.element {
color: var(--capricious-purple);
background-color: hsl(291 100% 43%);
border-color: oklch(0.578 0.278 319.4);
}Tailwind CSS v4
@theme {
--color-capricious-purple: #bb00dd;
--color-capricious-purple-50: #ffdbff;
--color-capricious-purple-100: #ffc9ff;
--color-capricious-purple-200: #ffa9ff;
--color-capricious-purple-300: #f67eff;
--color-capricious-purple-400: #e152ff;
--color-capricious-purple-500: #cf00f5;
--color-capricious-purple-600: #af01cf;
--color-capricious-purple-700: #8c06a6;
--color-capricious-purple-800: #67057f;
--color-capricious-purple-900: #48055a;
--color-capricious-purple-950: #2f003d;
}SCSS
$capricious-purple: #bb00dd;
$capricious-purple-rgb: 187, 0, 221;
$capricious-purple-light: mix(#fff, $capricious-purple, 20%);
$capricious-purple-dark: mix(#000, $capricious-purple, 20%);
.element {
color: $capricious-purple;
box-shadow: 0 0 0 2px rgba($capricious-purple, 0.35);
}