Retro Coastal カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Retro Coastal palette

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

Retro Coastal カラー パレット PNG 画像

Download retro coastal color palette PNG image (landscape)
Download retro coastal color palette PNG image (square)

Retro Coastal カラーパレット CSS

/* CSS */
.color-1 {
color: #b9dfcd;
}
.color-2 {
color: #5eb0ac;
}
.color-3 {
color: #4468a2;
}
.color-4 {
color: #4a4b54;
}
.color-5 {
color: #ff8a97;
}

/* CSS Variables */
:root {
--color-1: #b9dfcd;
 --color-2: #5eb0ac;
 --color-3: #4468a2;
 --color-4: #4a4b54;
 --color-5: #ff8a97;
 }

Retro Coastal の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b9dfcd, #5eb0ac, #4468a2, #4a4b54, #ff8a97);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b9dfcd, #5eb0ac, #4468a2, #4a4b54, #ff8a97);
}

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

Retro Coastal color palette created on .