Athens Breeze カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Athens Breeze palette

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

Athens Breeze カラー パレット PNG 画像

Download athens breeze color palette PNG image (landscape)
Download athens breeze color palette PNG image (square)

Athens Breeze カラーパレット CSS

/* CSS */
.color-1 {
color: #e4e9ec;
}
.color-2 {
color: #b9c8da;
}
.color-3 {
color: #7a9ab8;
}
.color-4 {
color: #4c709a;
}
.color-5 {
color: #2f4b7f;
}

/* CSS Variables */
:root {
--color-1: #e4e9ec;
 --color-2: #b9c8da;
 --color-3: #7a9ab8;
 --color-4: #4c709a;
 --color-5: #2f4b7f;
 }

Athens Breeze の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #e4e9ec, #b9c8da, #7a9ab8, #4c709a, #2f4b7f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #e4e9ec, #b9c8da, #7a9ab8, #4c709a, #2f4b7f);
}

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

Athens Breeze color palette created on .