Refactoring UI Color Palette

This tool is designed to help you build a color palette for your website or app. It allows you to pick or generate a primary and accent color, and then generates a color palette based on those colors. It is loosely inspired on this Refactoring UI preview post: Building Your Color Palette.
This tool is in no way affiliated with Refactoring UI or its authors.

Greys

Text, backgrounds, panels, form controls — almost everything in an interface is grey.

Primary color

Most sites need one, maybe two colors that are used for primary actions, emphasizing navigation elements, etc. These are the colors that determine the overall look of a site — the ones that make you think of Facebook as "blue", even though it's really mostly grey.

Accent color

On top of primary colors, every site needs a few accent colors for communicating different things to the user.

For example, you might want to use an eye-grabbing color like yellow, pink, or teal to highlight a new feature.

Demo of the selected primary and accent color.

This is some demo notification text, showing what it looks like when it is displayed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam quisque id diam vel quam elementum pulvinar. Quis commodo odio aenean sed adipiscing diam. Amet mauris commodo quis imperdiet massa. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Mattis enim ut tellus elementum sagittis. Sed vulputate mi sit amet mauris commodo quis imperdiet. Senectus et netus et malesuada fames. Erat velit scelerisque in dictum non consectetur a erat nam. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. Neque volutpat ac tincidunt vitae semper quis lectus nulla at.

Suscipit adipiscing bibendum est ultricies integer. Iaculis nunc sed augue lacus viverra vitae. Cursus vitae congue mauris rhoncus. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Enim ut sem viverra aliquet eget. Diam volutpat commodo sed egestas egestas fringilla. Vitae suscipit tellus mauris a diam maecenas sed. Cursus euismod quis viverra nibh cras pulvinar mattis. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Sed viverra ipsum nunc aliquet bibendum. Enim eu turpis egestas pretium aenean pharetra. Semper feugiat nibh sed pulvinar. Quis viverra nibh cras pulvinar. Tristique magna sit amet purus gravida quis blandit. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Sapien faucibus et molestie ac feugiat sed. Egestas congue quisque egestas diam in. Euismod elementum nisi quis eleifend quam adipiscing vitae.

The same thing as the other notification, but now in the accent colors.

An example CSS implementation for these colors

:root {
  --primary-color: #DCBFD8;
  --accent-color: #559365;
  --text-color: #334155;
  --background-color: #ffffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--primary-color);
}

button {
  background-color: var(--accent-color);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #234027;
    --accent-color: #AA6C9A;
    --text-color: #ffffff;
    --background-color: #111111;
  }
}