Citlali カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Citlali palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

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

Citlali カラーパレット CSS

/* CSS */
.color-1 {
color: #fff0db;
}
.color-2 {
color: #ffe1d1;
}
.color-3 {
color: #ffcfcc;
}
.color-4 {
color: #ffb8cf;
}
.color-5 {
color: #ffa8cb;
}

/* CSS Variables */
:root {
--color-1: #fff0db;
 --color-2: #ffe1d1;
 --color-3: #ffcfcc;
 --color-4: #ffb8cf;
 --color-5: #ffa8cb;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #fff0db, #ffe1d1, #ffcfcc, #ffb8cf, #ffa8cb);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #fff0db, #ffe1d1, #ffcfcc, #ffb8cf, #ffa8cb);
}

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

Citlali color palette created on .