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
orange
yellow
green
cyan
blue
purple
pink
gray
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
xxxxxxxxxx
<div class="color-white bg-black">Somewhere, something incredible is waiting to be known.</div>
<div class="color-black">Somewhere, something incredible is waiting to be known.</div>
<div class="color-transparent">Somewhere, something incredible is waiting to be known.</div>
<div class="color-gray-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-red-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-orange-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-yellow-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-green-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-cyan-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-blue-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-pink-5">Somewhere, something incredible is waiting to be known.</div>
Different lightness
xxxxxxxxxx
<div class="color-purple-1">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-2">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-3">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-4">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-5">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-6">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-7">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-8">Somewhere, something incredible is waiting to be known.</div>
<div class="color-purple-9">Somewhere, something incredible is waiting to be known.</div>