ui-flat-colors

UI-Flat-Colors

This simple package is a collection of 280 colors from https://flatuicolors.com/ to use it on react-native.

Installation

Using npm:

npm install --save ui-flat-colors
# or
yarn add ui-flat-colors

Bundled Icon Sets

• Flat UI Palette v1
• American Palette
• Aussie Palette
• British Palette
• Canadian Palette
• Chinese Palette
• Dutch Palette
• French Palette
• German Palette
• Indian Palette
• Russian Palette
• Spanish Palette
• Swedish Palette
• Turkish Palette

Usage

Here Its focus on rgba() format to control opacity.

import { British } from 'ui-flat-colors';
// or
import { Canadian, Russian } from 'ui-flat-colors';

For example, you can invoke functions as American().black where opacity is by default 1 when argument is blank.

backgroundColor: American().black,

You don't need to put floating number; just place a number range [0, 9] to control opacity.

American(8).black

Component Naming:

FlatUI() Palette v1:

cyan	green	blue	lightGray	black
darkCyan	darkGreen	darkBlue	white	darkBlack
yellow	orange	red	purple	gray
darkYellow	darkOrange	darkRed	darkPurple	darkGray

American() Palette:

lightGreen	lightSky	lightBlue	lightPurple	white
green	sky	blue	purple	gray
lightYellow	lightOrange	lightRed	lightPink	darkGray
yellow	orange	red	pink	black

Aussie() Palette:

lightYellow	lightOrange	lightRed	lightGreen	white
yellow	orange	red	green	gray
lightSky	lightPink	lightBlue	deepBlue	darkGray
sky	pink	blue	deepDarkBlue	black

British() Palette:

lightSky	lightPurple	lightYellow	green	blue
sky	purple	yellow	darkGreen	navalBlue
lightRed	white	grayBlue	deepBlue	blackOne
red	darkWhite	darkGrayBlue	deepDarkBlue	blackTwo

Canadian() Palette:

lightPink	lightYellow	lightRed	lightSky	lightGreen
pink	yellow	red	sky	green
lightCyan	lightBlue	lightPurple	white	gray
cyan	blue	purple	lightGray	black

Chinese() Palette:

lightOrange	lightRed	lightPink	lightGray	darkGray
orange	red	pink	gray	black
lightGreen	lightSky	lightBlue	lightWhite	darkWhite
green	sky	blue	white	darkerWhite

Dutch() Palette:

lighterOrange	lighterGreen	lightSky	lighterPink	pink
lightOrange	lightGreen	lightCyan	lightPink	darkPink
orange	green	sky	lightPurple	purple
red	cyan	darkBlue	darkPurple	darkerPurple

French() Palette:

lightYellow	lightRed	lightBlue	lightSky	lightGreen
yellow	red	blue	sky	green
lightOrange	darkRed	darkBlue	darkSky	lightCyan
orange	pink	darkerBlue	darkerSky	cyan

German() Palette:

lightRed	lightOrange	lightYellow	lightGreen	lightCyan
red	orange	yellow	green	cyan
lightSky	lightBlue	lightPurple	white	darkGray
sky	blue	purple	lightGray	black

Indian() Palette:

lightOrange	lightSky	yellow	cyan	white
orange	sky	lightYellow	darkCyan	black
darkPink	blue	lightPink	lightCyan	lightPurple
darkerPink	darkBlue	pink	grayYellow	purple

Russian() Palette:

lightOrange	lightYellow	lightBlue	lightRed	darkPink
orange	yellow	blue	red	darkerPink
lightPurple	lighterPink	lightSky	pinker	gray
purple	lightPink	sky	pink	black

Spanish() Palette:

lightOrange	lightBlue	white	lightSky	lightGreen
orange	blue	darkGray	sky	green
lightRed	darkBlue	lightGray	yellow	lightYellow
red	darkerBlue	black	darkYellow	grayYellow

Swedish() Palette

lightPink	lightBlue	lightSky	lightCyan	lightGreen
pink	blue	sky	cyan	green
lightOrange	lightYellow	lightRed	white	darkGray
orange	yellow	red	gray	black

Turkish() Palette

lightPurple	lightPink	lightRed	lightOrange	lightYellow
purple	pink	red	orange	yellow
lightGreen	lightSky	lightCyan	lightBlue	gray
green	sky	cyan	blue	black