Celestial Tide カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Celestial Tide palette

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

Celestial Tide カラー パレット PNG 画像

Download celestial tide color palette PNG image (landscape)
Download celestial tide color palette PNG image (square)

Celestial Tide カラーパレット CSS

/* CSS */
.color-1 {
color: #f1f5f8;
}
.color-2 {
color: #c8d5e4;
}
.color-3 {
color: #88b8d7;
}
.color-4 {
color: #4f8cba;
}
.color-5 {
color: #1e4b6c;
}

/* CSS Variables */
:root {
--color-1: #f1f5f8;
 --color-2: #c8d5e4;
 --color-3: #88b8d7;
 --color-4: #4f8cba;
 --color-5: #1e4b6c;
 }

Celestial Tide の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f1f5f8, #c8d5e4, #88b8d7, #4f8cba, #1e4b6c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f1f5f8, #c8d5e4, #88b8d7, #4f8cba, #1e4b6c);
}

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

Celestial Tide color palette created on .