Coco Rayo カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Coco Rayo palette

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

Coco Rayo カラー パレット PNG 画像

Download coco rayo color palette PNG image (landscape)
Download coco rayo color palette PNG image (square)

Coco Rayo カラーパレット CSS

/* CSS */
.color-1 {
color: #ffffff;
}
.color-2 {
color: #f9eaa9;
}
.color-3 {
color: #f1c40e;
}
.color-4 {
color: #3b5897;
}
.color-5 {
color: #f39c12;
}

/* CSS Variables */
:root {
--color-1: #ffffff;
 --color-2: #f9eaa9;
 --color-3: #f1c40e;
 --color-4: #3b5897;
 --color-5: #f39c12;
 }

Coco Rayo の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffffff, #f9eaa9, #f1c40e, #3b5897, #f39c12);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffffff, #f9eaa9, #f1c40e, #3b5897, #f39c12);
}

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

Coco Rayo color palette created on .