Goob カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Goob palette

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

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

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

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

Download goob color palette PNG image (landscape)
Download goob color palette PNG image (square)

Goob カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6b6b;
}
.color-2 {
color: #ff9f6b;
}
.color-3 {
color: #ffcb6b;
}
.color-4 {
color: #6bffb8;
}
.color-5 {
color: #6bc9ff;
}

/* CSS Variables */
:root {
--color-1: #ff6b6b;
 --color-2: #ff9f6b;
 --color-3: #ffcb6b;
 --color-4: #6bffb8;
 --color-5: #6bc9ff;
 }

Goob の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6b6b, #ff9f6b, #ffcb6b, #6bffb8, #6bc9ff);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6b6b, #ff9f6b, #ffcb6b, #6bffb8, #6bc9ff);
}

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

Goob color palette created on .