colors

@devgrace/ui Theme Colors

Usage

import { colors } from '@devgrace/ui'

const Example = () => {
  return (
    <>
      <div style={{ width: "100%", height: '50px', backgroundColor: colors.red[500] }} />
      <div style={{ width: "100%", height: '50px', backgroundColor: colors.yellow[500] }} />
      <div style={{ width: "100%", height: '50px', backgroundColor: colors.indigo[500] }} />
    </>
  )
}

Red

colors.red[50]#FFEBEE

colors.red[100]#FFCDD2

colors.red[200]#EF9A9A

colors.red[300]#E57373

colors.red[400]#EF5350

colors.red[500]#F44336

colors.red[600]#E53935

colors.red[700]#D32F2F

colors.red[800]#C62828

colors.red[900]#B71C1C

Pink

colors.pink[50]#FCE4EC

colors.pink[100]#F8BBD0

colors.pink[200]#F48FB1

colors.pink[300]#F06292

colors.pink[400]#EC407A

colors.pink[500]#E91E63

colors.pink[600]#D81B60

colors.pink[700]#C2185B

colors.pink[800]#AD1457

colors.pink[900]#880E4F

Purple

colors.purple[50]#F3E5F5

colors.purple[100]#E1BEE7

colors.purple[200]#CE93D8

colors.purple[300]#BA68C8

colors.purple[400]#AB47BC

colors.purple[500]#9C27B0

colors.purple[600]#8E24AA

colors.purple[700]#7B1FA2

colors.purple[800]#6A1B9A

colors.purple[900]#4A148C

Indigo

colors.indigo[50]#E8EAF6

colors.indigo[100]#C5CAE9

colors.indigo[200]#9FA8DA

colors.indigo[300]#7986CB

colors.indigo[400]#5C6BC0

colors.indigo[500]#3F51B5

colors.indigo[600]#3949AB

colors.indigo[700]#303F9F

colors.indigo[800]#283593

colors.indigo[900]#1A237E

Blue

colors.blue[50]#E3F2FD

colors.blue[100]#BBDEFB

colors.blue[200]#90CAF9

colors.blue[300]#64B5F6

colors.blue[400]#42A5F5

colors.blue[500]#2196F3

colors.blue[600]#1E88E5

colors.blue[700]#1976D2

colors.blue[800]#1565C0

colors.blue[900]#0D47A1

Cyan

colors.cyan[50]#E0F7FA

colors.cyan[100]#B2EBF2

colors.cyan[200]#80DEEA

colors.cyan[300]#4DD0E1

colors.cyan[400]#26C6DA

colors.cyan[500]#00BCD4

colors.cyan[600]#00ACC1

colors.cyan[700]#0097A7

colors.cyan[800]#00838F

colors.cyan[900]#006064

Teal

colors.teal[50]#E0F2F1

colors.teal[100]#B2DFDB

colors.teal[200]#80CBC4

colors.teal[300]#4DB6AC

colors.teal[400]#26A69A

colors.teal[500]#009688

colors.teal[600]#00897B

colors.teal[700]#00796B

colors.teal[800]#00695C

colors.teal[900]#004D40

Green

colors.green[50]#E8F5E9

colors.green[100]#C8E6C9

colors.green[200]#A5D6A7

colors.green[300]#81C784

colors.green[400]#66BB6A

colors.green[500]#4CAF50

colors.green[600]#43A047

colors.green[700]#388E3C

colors.green[800]#2E7D32

colors.green[900]#1B5E20

Lime

colors.lime[50]#F9FBE7

colors.lime[100]#F0F4C3

colors.lime[200]#E6EE9C

colors.lime[300]#DCE775

colors.lime[400]#D4E157

colors.lime[500]#CDDC39

colors.lime[600]#C0CA33

colors.lime[700]#AFB42B

colors.lime[800]#9E9D24

colors.lime[900]#827717

Yellow

colors.yellow[50]#FFFDE7

colors.yellow[100]#FFF9C4

colors.yellow[200]#FFF59D

colors.yellow[300]#FFF176

colors.yellow[400]#FFEE58

colors.yellow[500]#FFEB3B

colors.yellow[600]#FDD835

colors.yellow[700]#FBC02D

colors.yellow[800]#F9A825

colors.yellow[900]#F57F17

Orange

colors.orange[50]#FFF3E0

colors.orange[100]#FFF0B2

colors.orange[200]#FFCC80

colors.orange[300]#FFB74D

colors.orange[400]#FFA726

colors.orange[500]#FF9800

colors.orange[600]#FB8C00

colors.orange[700]#F57C00

colors.orange[800]#EF6C00

colors.orange[900]#E65100

Brown

colors.brown[50]#EFEBE9

colors.brown[100]#D7CCC8

colors.brown[200]#BCAAA4

colors.brown[300]#A1887F

colors.brown[400]#8D6E63

colors.brown[500]#795548

colors.brown[600]#6D4C41

colors.brown[700]#5D4037

colors.brown[800]#4E342E

colors.brown[900]#3E2723

Gray

colors.gray[50]#FAFAFA

colors.gray[100]#F5F5F5

colors.gray[200]#EEEEEE

colors.gray[300]#E0E0E0

colors.gray[400]#BDBDBD

colors.gray[500]#9E9E9E

colors.gray[600]#757575

colors.gray[700]#616161

colors.gray[800]#424242

colors.gray[900]#212121