Periwinkle

Dreamy and contemplative — periwinkle floats between blue and violet with poetic grace.

Shades 11

Base #ccccff

RGB 204, 204, 255

100

200

300

400

500

600

700

800

All Periwinkle Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --periwinkle-50: #f6f6ff;
  --periwinkle-100: #ebebff;
  --periwinkle-200: #ddddff;
  --periwinkle-300: #ccccff;
  --periwinkle-400: #adadff;
  --periwinkle-500: #8080ff;
  --periwinkle-600: #5555e0;
  --periwinkle-700: #3a3ab5;
  --periwinkle-800: #26268a;
  --periwinkle-900: #151558;
  --periwinkle-950: #0a0a2c;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        periwinkle: {
          50: '#f6f6ff',
          100: '#ebebff',
          200: '#ddddff',
          300: '#ccccff',
          400: '#adadff',
          500: '#8080ff',
          600: '#5555e0',
          700: '#3a3ab5',
          800: '#26268a',
          900: '#151558',
          950: '#0a0a2c',
        },
      },
    },
  },
};

SCSS Map

$periwinkle-palette: (
  50: #f6f6ff,
  100: #ebebff,
  200: #ddddff,
  300: #ccccff,
  400: #adadff,
  500: #8080ff,
  600: #5555e0,
  700: #3a3ab5,
  800: #26268a,
  900: #151558,
  950: #0a0a2c,
);