Claire カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Claire palette

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

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

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

Claire カラーパレット CSS

/* CSS */
.color-1 {
color: #f5b400;
}
.color-2 {
color: #f6d12c;
}
.color-3 {
color: #f9e25d;
}
.color-4 {
color: #fcecb6;
}
.color-5 {
color: #fcd7a6;
}

/* CSS Variables */
:root {
--color-1: #f5b400;
 --color-2: #f6d12c;
 --color-3: #f9e25d;
 --color-4: #fcecb6;
 --color-5: #fcd7a6;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5b400, #f6d12c, #f9e25d, #fcecb6, #fcd7a6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5b400, #f6d12c, #f9e25d, #fcecb6, #fcd7a6);
}

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

Claire color palette created on .