Loading...

Azure Sunrise カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Azure Sunrise palette

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

Azure Sunrise カラーパレット (PNG) をダウンロード

Download azure sunrise color palette PNG image (landscape)
Download azure sunrise color palette PNG image (square)

Azure Sunrise カラーパレット CSS

/* CSS */
.color-1 {
color: #5c70e0;
}
.color-2 {
color: #0074c2;
}
.color-3 {
color: #f2f4f7;
}
.color-4 {
color: #fcbd4f;
}
.color-5 {
color: #e76a6a;
}

/* CSS Variables */
:root {
--color-1: #5c70e0;
 --color-2: #0074c2;
 --color-3: #f2f4f7;
 --color-4: #fcbd4f;
 --color-5: #e76a6a;
 }

Azure Sunrise の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5c70e0, #0074c2, #f2f4f7, #fcbd4f, #e76a6a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5c70e0, #0074c2, #f2f4f7, #fcbd4f, #e76a6a);
}

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

Azure Sunrise color palette created on .