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
Different lightness