色名 · #EEAAFF
Pink Sugar
Pink Sugarは#EEAAFF：rgb(238 170 255)、hsl(288 100% 83%)、oklch(0.831 0.136 319.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Pink Sugar color name →
#EEAAFF
oklch(0.831 0.136 319.5)
カラー変換
- HEX
- #eeaaff
- RGB
- rgb(238 170 255)
- HSL
- hsl(288 100% 83%)
- HWB
- hwb(288 67% 0%)
- OKLCH
- oklch(0.831 0.136 319.5)
- OKLab
- oklab(0.831 0.103 -0.088)
- CIE Lab
- lab(78.4 36.1 -32.26)
- LCH
- lch(78.4 48.41 318.2)
- CMYK
- cmyk(7% 33% 0% 0%)
ティント · シェード · トーン
ティント
- F0B3FF
- F2BCFF
- F4C4FF
- F6CDFF
- F7D5FF
- F9DEFF
- FBE6FF
- FCEEFF
- FEF7FF
シェード
- CF93DE
- B17DBE
- 93689E
- 775380
- 5C3F63
- 422D48
- 2A1B2E
- 140B16
- 030103
トーン
- E3A6F2
- D7A2E5
- CC9ED8
- C19ACB
- B696BE
- AB92B2
- A08DA5
- 958999
- 8B858C
カラーハーモニー
補色 +180°
- EEAAFF
Pink Sugar
- 98DD86
≈ VIC 20 Green
類似色 -30° +30°
- EEAAFF
Pink Sugar
- C6BEFF
≈ Lavender Tonic
- FFA9D2
≈ Majin Bū Pink
トライアド +120° +240°
- EEAAFF
Pink Sugar
- F6BD55
≈ Butterfield
- 27E2E9
≈ Cold Heights
スプリットコンプリメンタリー +150° +210°
- EEAAFF
Pink Sugar
- CECF5E
≈ Energised
- 58E4B9
≈ Aphrodite Aqua
テトラード +90° +180° +270°
- EEAAFF
Pink Sugar
- FFB48A
≈ Coral Dusk
- 98DD86
≈ VIC 20 Green
- 78D5FF
≈ Sky
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.77:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.82:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.82:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--pink-sugar: #eeaaff;
--pink-sugar-rgb: 238 170 255;
--pink-sugar-oklch: oklch(0.831 0.136 319.5);
}
.element {
color: var(--pink-sugar);
background-color: hsl(288 100% 83%);
border-color: oklch(0.831 0.136 319.5);
}Tailwind CSS v4
@theme {
--color-pink-sugar: #eeaaff;
--color-pink-sugar-50: #ffe9ff;
--color-pink-sugar-100: #fedaff;
--color-pink-sugar-200: #f0c2f8;
--color-pink-sugar-300: #d8a0e1;
--color-pink-sugar-400: #c183d1;
--color-pink-sugar-500: #ac65be;
--color-pink-sugar-600: #9256a0;
--color-pink-sugar-700: #754581;
--color-pink-sugar-800: #553261;
--color-pink-sugar-900: #3c2244;
--color-pink-sugar-950: #25112c;
}SCSS
$pink-sugar: #eeaaff;
$pink-sugar-rgb: 238, 170, 255;
$pink-sugar-light: mix(#fff, $pink-sugar, 20%);
$pink-sugar-dark: mix(#000, $pink-sugar, 20%);
.element {
color: $pink-sugar;
box-shadow: 0 0 0 2px rgba($pink-sugar, 0.35);
}