Colors
Rapid visual prototyping
Property group | Applies to |
|---|---|
--color-* | color , background-color |
Pollen's color palette is designed for rapid prototyping as a better alternative to browser defaults, and to be extended as your project evolves.
Each color has a family of shades ranging from
300 (light) to 700 (dark), as well as an extended greyscale. The unsuffixed color (eg: --color-red) in each family is an alias for median in that family (eg: --color-red-500)..alert {
color: var(--color-red);
}
Property | Value |
|---|---|
--color-grey | var(--color-grey-500) |
--color-grey-50 | #f9fafb |
--color-grey-100 | #f2f4f5 |
--color-grey-200 | #e8eaed |
--color-grey-300 | #d4d7dd |
--color-grey-400 | #a5aab4 |
--color-grey-500 | #767c89 |
--color-grey-600 | #555d6e |
--color-grey-700 | #3f4754 |
--color-grey-800 | #2c343f |
--color-grey-900 | #10181C |
--color-black | #14141B |
Property | Value |
|---|---|
--color-red | var(--color-red-500) |
--color-red-300 | #fc8181 |
--color-red-500 | #e53e3e |
--color-red-700 | #c53030 |
Variable | Value |
|---|---|
--color-green | var(--color-green-500) |
--color-green-300 | #9ae6b4 |
--color-green-500 | #48bb78 |
--color-green-700 | #2f855a |
Variable | Value |
|---|---|
--color-blue | var(--color-blue-500) |
--color-blue-300 | #63b3ed |
--color-blue-500 | #4299e1 |
--color-blue-700 | #3182ce |
Property | Value |
|---|---|
--color-pink | var(--color-pink-500) |
--color-pink-300 | #fbb6ce |
--color-pink-500 | #ed64a6 |
--color-pink-700 | #d53f8c |
Property | Value |
|---|---|
--color-purple | var(--color-purple-500) |
--color-purple-300 | #b794f4 |
--color-purple-500 | #805ad5 |
--color-purple-700 | #6b46c1 |
Property | Value |
|---|---|
--color-teal | var(--color-teal-500) |
--color-teal-300 | #81e6d9 |
--color-teal-500 | #38b2ac |
--color-teal-700 | #2c7a7b |
Property | Value |
|---|---|
--color-yellow | var(--color-yellow-500) |
--color-yellow-300 | #faf089 |
--color-yellow-500 | #ecc94b |
--color-yellow-700 | #d69e2e |
Property | Value |
|---|---|
--color-orange | var(--color-orange-500) |
--color-orange-300 | #fbd38d |
--color-orange-500 | #ff9800 |
--color-orange-700 | #dd6b20 |
Property | Value |
|---|---|
--color-brown | var(--color-brown-500) |
--color-brown-300 | #a1887f |
--color-brown-500 | #795548 |
--color-brown-700 | #5d4037 |
Last modified 1yr ago