Hello Kitty カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hello Kitty palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

このパレットを共有する先：

Hello Kitty カラーパレット (PNG) をダウンロード

Download hello kitty color palette PNG image (landscape)
Download hello kitty color palette PNG image (square)

Hello Kitty カラーパレット CSS

/* CSS */
.color-1 {
color: #f6a2af;
}
.color-2 {
color: #f8d7b4;
}
.color-3 {
color: #eab8e3;
}
.color-4 {
color: #f6b6e8;
}
.color-5 {
color: #fbcb3c;
}

/* CSS Variables */
:root {
--color-1: #f6a2af;
 --color-2: #f8d7b4;
 --color-3: #eab8e3;
 --color-4: #f6b6e8;
 --color-5: #fbcb3c;
 }

Hello Kitty の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6a2af, #f8d7b4, #eab8e3, #f6b6e8, #fbcb3c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6a2af, #f8d7b4, #eab8e3, #f6b6e8, #fbcb3c);
}

似たようなカラーパレット

Hello Kitty color palette created on .