Color
Palette
Particles CSS provides a default color palette that you can use for any of the CSS properties that apply a color (color, background-color, border-color, etc).
The classes will change between CSS properties, but the format for the colors will be the same: [class]-[color]-[variant 1-9].
For example: color-purple-5
Here's all the colors generated by default.
red
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
orange
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
cyan
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
blue
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
purple
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
pink
pink-1
pink-2
pink-3
pink-4
pink-5
pink-6
pink-7
pink-8
pink-9
gray
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
Customization:
| Variable | Default Value |
|---|---|
| $saturation | 70% |
| $colors | ('red', 0[, $saturation]), ('orange', 25[, $saturation]), ('yellow', 55[, $saturation]), ('green', 110[, $saturation]), ('cyan', 170[, $saturation]), ('blue', 210[, $saturation]), ('purple', 270[, $saturation]), ('pink', 300[, $saturation]) |
Colors use HSL values to dynamically generate variants based on their lightness. To accomplish this, you must provide a list of colors. Each item in the list must be itself, a lit with the name you want to give the color, and it's hue. Optionally, you may provide a third value to the color list for it's saturation.
To find the right hue from a different color format, try this tool.
Classes
| Class | Properties |
|---|---|
| .color-white | color: #fff; |
| .color-black | color: #000; |
| .color-transparent | color: transparent; |
| .color-gray-{1-9} | color: {hsl value}; |
| .color-{name}-{1-9} | color: {hsl value}; |
Color
xxxxxxxxxx1
<div class="color-white bg-black">Somewhere, something incredible is waiting to be known.</div>2
<div class="color-black">Somewhere, something incredible is waiting to be known.</div>3
<div class="color-transparent">Somewhere, something incredible is waiting to be known.</div>4
<div class="color-gray-5">Somewhere, something incredible is waiting to be known.</div>5
<div class="color-red-5">Somewhere, something incredible is waiting to be known.</div>6
<div class="color-orange-5">Somewhere, something incredible is waiting to be known.</div>7
<div class="color-yellow-5">Somewhere, something incredible is waiting to be known.</div>8
<div class="color-green-5">Somewhere, something incredible is waiting to be known.</div>9
<div class="color-cyan-5">Somewhere, something incredible is waiting to be known.</div>10
<div class="color-blue-5">Somewhere, something incredible is waiting to be known.</div>11
<div class="color-purple-5">Somewhere, something incredible is waiting to be known.</div>12
<div class="color-pink-5">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Different lightness
xxxxxxxxxx1
<div class="color-purple-1">Somewhere, something incredible is waiting to be known.</div>2
<div class="color-purple-2">Somewhere, something incredible is waiting to be known.</div>3
<div class="color-purple-3">Somewhere, something incredible is waiting to be known.</div>4
<div class="color-purple-4">Somewhere, something incredible is waiting to be known.</div>5
<div class="color-purple-5">Somewhere, something incredible is waiting to be known.</div>6
<div class="color-purple-6">Somewhere, something incredible is waiting to be known.</div>7
<div class="color-purple-7">Somewhere, something incredible is waiting to be known.</div>8
<div class="color-purple-8">Somewhere, something incredible is waiting to be known.</div>9
<div class="color-purple-9">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.