Puppertino

/

Examples

/

Color Palette

# Color Palette

Colors are amazing, but if you don't know what colors to use or need a great palette, Puppertino has you covered. We have taken these beautiful colors from Elementary guidelines. You can use the color palette component using the CSS of color palette or downloading the full CSS (Not recommended if you are just going to use this component).

## Official Apple Colors

## Apple Red

Dark

## Apple Orange

Dark

## Apple Yellow

Dark

## Apple Green

Dark

## Apple Mint

Dark

## Apple Teal

Dark

## Apple Cyan

Dark

## Apple Blue

Dark

## Apple Indigo

Dark

## Apple Purple

Dark

## Apple Pink

Dark

## Apple Brown

Dark

## Apple Gray

Dark

## General colors

Currently Puppertino consists of 12 color palettes which you can choose from. To use them just click on them and the class for the color will be copied to your clipboard! Alternatively, find the color you want to use, add `p-`, the color and, the shade you want to use, i.e: `p-strawberry-100` (Base colors don't use shade).
There are also text colors, just add `-color` at the end, i.e `p-strawberry-100-color`
New! We've added colors as variables, so you use them wherever and however you like, just add `--` before the color in your CSS code, i.e `--p-strawberry-100`. This can be use to create amazing gradients and theming.

## Strawberry

900

700

500

300

100

## Orange

900

700

500

300

100

## Banana

900

700

500

300

100

## Lime

900

700

500

300

100

## Mint

900

700

500

300

100

## Blueberry

900

700

500

300

100

## Grape

900

700

500

300

100

## Bubblegum

900

700

500

300

100

## Cocoa

900

700

500

300

100

## Silver

900

700

500

300

100

## Slate

900

700

500

300

100

## Dark

900

700

500

300

100

Color copied!