Skip to content

Customization

Colors

Pico comes with 380 manually crafted colors to help you personalize your brand design system.

Red
Pink
Fuchsia
Purple
Violet
Indigo
Blue
Azure
Cyan
Jade
Green
Lime
Yellow
Amber
Pumpkin
Orange
Sand
Grey
Zinc
Slate

Usage with CSS#

The main Pico stylesheet excludes color utilities.

There is a separate stylesheet with all the color utilities that you can link in the <head> of your website.

<link rel="stylesheet" href="css/pico.colors.min.css">

Also available on jsDelivr CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
>

This stylesheet is almost the same size as the entire Pico library.

We do not recommend including all colors on a production site. You should include only the color families and shades that you use.

After linking the color utilities, you can style any element with the utility classes. Click on any color above to see details.

Pink title

<h2 class="pico-color-pink-500">Pink title</h2>
Pink card
<article class="pico-background-pink-600">
  Pink card
</article>

Usage with SASS#

You can import all colors as SASS variables in any .scss file with:

@use "colors" as *;

The colors can then be used like this:

h2 {
  color: $pink-500;
}

You can also generate the utility classes with @use:

@use "colors/utilities";

There are many settings available.

Here is, for example, how to generate only the color utilities (and not the background utilities) and only for red, pink, fuchsia, and purple color families.

@use "colors/utilities" with (
  $palette: (
    "color-families": (
      red,
      pink,
      fuchsia,
      purple,
    ),
  ),
  $utilities: (
    "background-colors": false,
  )
);
All default settings
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default;

// Palette
$palette: () !default;
$palette: map.merge(
  (
    // Color families
    "color-families":
      (
        red,
        pink,
        fuchsia,
        purple,
        violet,
        indigo,
        blue,
        azure,
        cyan,
        jade,
        green,
        lime,
        yellow,
        amber,
        pumpkin,
        orange,
        sand,
        grey,
        zinc,
        slate
      ),
    // Shades
    "shades":
      (
        50,
        100,
        150,
        200,
        250,
        300,
        350,
        400,
        450,
        500,
        550,
        600,
        650,
        700,
        750,
        800,
        850,
        900,
        950
      ),
    // Export main color for each family
    "enable-main-color": true,

    // Export shades for each family
    "enable-shades": true,

    // Export black and white
    "enable-black-and-white": false,

    // Light color used for dark backgrounds
    "light-color": #fff,

    // Dark color used for light backgrounds
    "dark-color": #000,

    // Export as HEX, RGB or HSL values
    "export-as": "hex" // hex | rgb | hsl
  ),
  $palette
);

// Properties names used for CSS variables and classes
// Useful if you want to shorten the names
$properties: () !default;
$properties: map.merge(
  (
    "color": "color",
    "background-color": "background",
  ),
  $properties
);

// Utilities to export
$utilities: () !default;
$utilities: map.merge(
  (
    // CSS Vars
    "css-vars": true,

    // Colors utility classes
    "colors": true,

    // Background color utility classes
    "background-colors": true,

    // Color value for background color utility classes
    "color-for-background-colors": true
  ),
  $utilities
);

Import in Figma#

You can use the Figma plugin Palette Importer to import all 380 Pico colors.

Figma plugin Palette Importer

Download the .json file with all the colors:

Download

Edit this page on GitHub