Rodger カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Rodger palette

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

Rodger カラー パレット PNG 画像

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

Rodger カラーパレット CSS

/* CSS */
.color-1 {
color: #3e576a;
}
.color-2 {
color: #7a95a8;
}
.color-3 {
color: #bed0da;
}
.color-4 {
color: #ebb67a;
}
.color-5 {
color: #d97f68;
}

/* CSS Variables */
:root {
--color-1: #3e576a;
 --color-2: #7a95a8;
 --color-3: #bed0da;
 --color-4: #ebb67a;
 --color-5: #d97f68;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #3e576a, #7a95a8, #bed0da, #ebb67a, #d97f68);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #3e576a, #7a95a8, #bed0da, #ebb67a, #d97f68);
}

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

Rodger color palette created on .