A gorgeous, accessible color system An open-source color system for designing beautiful, accessible websites and apps. A dart library for Radix Colors

View the Flutter web demo

Add the Radix Colors package to pubspec.yaml

dependencies:
  radix_colors: ^1.0.3

Import the package in your dart file

import 'package:radix_colors/radix_colors.dart';

Radix Colors provides 15 color scales, designed for white foreground text at step 9.

RadixColors.amber;

RadixColors.dark.amber;

RadixColorsDynamic(context).amber;

RadixColors.amber.step1;
RadixColors.amber.step2;
RadixColors.amber.step3;
RadixColors.amber.step4;
RadixColors.amber.step5;
RadixColors.amber.step6;
RadixColors.amber.step7;
RadixColors.amber.step8;
RadixColors.amber.step9;
RadixColors.amber.step10;
RadixColors.amber.step11;
RadixColors.amber.step12;

Appropriate applications include:

• Main app background
• Striped table background
• Code block background
• Card background
• Sidebar background
• Canvas area background

• Step 3 is for normal states.
• Step 4 is for hover states.
• Step 5 is for pressed or selected states.

Even if your component has a transparent background in its default state, you should skip Step 3 and use Step 4 for its hover state.

For call-to-action components that you want to draw particular attention to, you can bump each color one step higher to steps 4, 5, and 6.

For complex components where you need many subtle colors to communicate different meanings, you can get creative and do something like:

• Step 3 for hovered backgrounds.
• Step 4 for selected / pressed backgrounds.
• Step 5 for "unread" backgrounds.
• Step 6 for hovered "unread" backgrounds.

• Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
• Step 7 is designed for borders on interactive components, but can also be used for focus rings.
• Step 8 is designed for borders on interactive components in their hover state.

Step 9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications:

• Website/App backgrounds
• Website section backgrounds
• Header backgrounds
• Component backgrounds
• Graphics/Logos
• Overlays
• Coloured shadows
• Accent borders

Most step 9 colors are designed for white foreground text. RadixColors.sky, RadixColors.mint, RadixColors.lime, RadixColors.yellow, and RadixColors.amber are designed for black foreground text and steps 9 and 10.

• Step 11 is designed for low-contrast text.
• Step 12 is designed for high-contrast text.

A major part of this documentation was lifted from the Radix Colors website.

Create an issue

Reach me on Twitter @lesliearkorful