Adam カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Adam palette

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

Adam カラー パレット PNG 画像

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

Adam カラーパレット CSS

/* CSS */
.color-1 {
color: #1e4a71;
}
.color-2 {
color: #498c9c;
}
.color-3 {
color: #78c4c9;
}
.color-4 {
color: #f7e69c;
}
.color-5 {
color: #f25454;
}

/* CSS Variables */
:root {
--color-1: #1e4a71;
 --color-2: #498c9c;
 --color-3: #78c4c9;
 --color-4: #f7e69c;
 --color-5: #f25454;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1e4a71, #498c9c, #78c4c9, #f7e69c, #f25454);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1e4a71, #498c9c, #78c4c9, #f7e69c, #f25454);
}

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

Adam color palette created on .