色名 · #DD77DD
Hibiscus Pop
Hibiscus Popは#DD77DD：rgb(221 119 221)、hsl(300 60% 67%)、oklch(0.719 0.178 327.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Hibiscus Pop color name →
#DD77DD
oklch(0.719 0.178 327.2)
カラー変換
- HEX
- #dd77dd
- RGB
- rgb(221 119 221)
- HSL
- hsl(300 60% 67%)
- HWB
- hwb(300 47% 13%)
- OKLCH
- oklch(0.719 0.178 327.2)
- OKLab
- oklab(0.719 0.15 -0.096)
- CIE Lab
- lab(64.72 51.01 -34.93)
- LCH
- lch(64.72 61.82 325.6)
- CMYK
- cmyk(0% 46% 0% 13%)
ティント · シェード · トーン
ティント
- E186E1
- E694E5
- EAA2E8
- EDAFEC
- F1BDEF
- F4CAF3
- F7D7F6
- FAE5F9
- FDF2FC
シェード
- C067C0
- A457A4
- 884788
- 6E386E
- 552A55
- 3D1C3D
- 261026
- 110511
- 020102
トーン
- D479D4
- CB7BCA
- C27CC1
- B97EB8
- AF7FAE
- A67FA5
- 9D809C
- 938093
- 8A8089
カラーハーモニー
補色 +180°
- DD77DD
Hibiscus Pop
- 43C15D
≈ Algal Fuel
類似色 -30° +30°
- DD77DD
Hibiscus Pop
- B18AFF
≈ Lilac Geode
- F86DA5
≈ Crazy Pink
トライアド +120° +240°
- DD77DD
Hibiscus Pop
- CB9D00
≈ Molten Bronze
- 00B9CB
≈ Utopia Beckons
スプリットコンプリメンタリー +150° +210°
- DD77DD
Hibiscus Pop
- 9DB000
≈ Marker Green
- 00BFA3
≈ First Post
テトラード +90° +180° +270°
- DD77DD
Hibiscus Pop
- F28300
≈ Mikan Orange
- 43C15D
≈ Algal Fuel
- 00B0FA
≈ Democrat
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.70:1 · APCA Lc 52
Ag
AAA黒の上
WCAG 7.75:1 · APCA Lc 50
最適な文字色: #000000
WCAG 7.75:1 (AAA) · APCA Lc 50
Contrast pairs
コードスニペット
CSS
:root {
--hibiscus-pop: #dd77dd;
--hibiscus-pop-rgb: 221 119 221;
--hibiscus-pop-oklch: oklch(0.719 0.178 327.2);
}
.element {
color: var(--hibiscus-pop);
background-color: hsl(300 60% 67%);
border-color: oklch(0.719 0.178 327.2);
}Tailwind CSS v4
@theme {
--color-hibiscus-pop: #dd77dd;
--color-hibiscus-pop-50: #ffe4ff;
--color-hibiscus-pop-100: #ffd3ff;
--color-hibiscus-pop-200: #ffb9fa;
--color-hibiscus-pop-300: #e995e4;
--color-hibiscus-pop-400: #d474d4;
--color-hibiscus-pop-500: #c151c2;
--color-hibiscus-pop-600: #a346a4;
--color-hibiscus-pop-700: #833883;
--color-hibiscus-pop-800: #602863;
--color-hibiscus-pop-900: #431b46;
--color-hibiscus-pop-950: #2b0a2d;
}SCSS
$hibiscus-pop: #dd77dd;
$hibiscus-pop-rgb: 221, 119, 221;
$hibiscus-pop-light: mix(#fff, $hibiscus-pop, 20%);
$hibiscus-pop-dark: mix(#000, $hibiscus-pop, 20%);
.element {
color: $hibiscus-pop;
box-shadow: 0 0 0 2px rgba($hibiscus-pop, 0.35);
}