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 |