Miss any of our Open RFC calls?Watch the recordings here! »

@tafalk/material-color-generator

1.0.6 • Public • Published

tafalk/material-color-generator

GitHub license build npm bundle size npm

Idempotently matches given string to a material color.

Light and dark classification is applied regarding the color chart here: If the text color is black for a background, it is considered as a light one; and if white, it is dark.

Install

npm install @tafalk/material-color-generator

And use it in your code like:

import { GetColor } from '@tafalk/material-color-generator'
const color = GetColor('my string', 'dark'); // -> something like 'ffffff'

Possibilities

GetColor function matches one of the colors below and returns the RGB code.

Light Dark
#ffebee ffebee #ef5350 ef5350
#ffcdd2 ffcdd2 #f44336 f44336
#ef9a9a ef9a9a #e53935 e53935
#e57373 e57373 #d32f2f d32f2f
#fce4ec fce4ec #c62828 c62828
#f8bbd0 f8bbd0 #b71c1c b71c1c
#f48fb1 f48fb1 #f06292 f06292
#f3e5f5 f3e5f5 #ec407a ec407a
#e1bee7 e1bee7 #e91e63 e91e63
#ce93d8 ce93d8 #d81b60 d81b60
#ede7f6 ede7f6 #c2185b c2185b
#d1c4e9 d1c4e9 #ad1457 ad1457
#b39ddb b39ddb #880e4f 880e4f
#e8eaf6 e8eaf6 #ba68c8 ba68c8
#c5cae9 c5cae9 #9c27b0 9c27b0
#9fa8da 9fa8da #8e24aa 8e24aa
#e3f2fd e3f2fd #7b1fa2 7b1fa2
#bbdefb bbdefb #6a1b9a 6a1b9a
#90caf9 90caf9 #4a148c 4a148c
#64b5f6 64b5f6 #9575cd 9575cd
#42a5f5 42a5f5 #7e57c2 7e57c2
#e1f5fe e1f5fe #673ab7 673ab7
#b3e5fc b3e5fc #5e35b1 5e35b1
#81d4fa 81d4fa #512da8 512da8
#4fc3f7 4fc3f7 #4527a0 4527a0
#29b6f6 29b6f6 #311b92 311b92
#03a9f4 03a9f4 #7986cb 7986cb
#e0f7fa e0f7fa #5c6bc0 5c6bc0
#b2ebf2 b2ebf2 #3f51b5 3f51b5
#80deea 80deea #3949ab 3949ab
#4dd0e1 4dd0e1 #303f9f 303f9f
#26c6da 26c6da #283593 283593
#00bcd4 00bcd4 #1a237e 1a237e
#00acc1 00acc1 #2196f3 2196f3
#e0f2f1 e0f2f1 #1e88e5 1e88e5
#b2dfdb b2dfdb #1976d2 1976d2
#80cbc4 80cbc4 #1565c0 1565c0
#4db6ac 4db6ac #0d47a1 0d47a1
#e8f5e9 e8f5e9 #039be5 039be5
#c8e6c9 c8e6c9 #0288d1 0288d1
#a5d6a7 a5d6a7 #0277bd 0277bd
#81c784 81c784 #01579b 01579b
#66bb6a 66bb6a #0097a7 0097a7
#4caf50 4caf50 #00838f 00838f
#f1f8e9 f1f8e9 #006064 006064
#dcedc8 dcedc8 #26a69a 26a69a
#c5e1a5 c5e1a5 #009688 009688
#aed581 aed581 #00897b 00897b
#9ccc65 9ccc65 #00796b 00796b
#8bc34a 8bc34a #00695c 00695c
#7cb342 7cb342 #004d40 004d40
#f9fbe7 f9fbe7 #43a047 43a047
#f0f4c3 f0f4c3 #388e3c 388e3c
#e6ee9c e6ee9c #2e7d32 2e7d32
#dce775 dce775 #1b5e20 1b5e20
#d4e157 d4e157 #689f38 689f38
#cddc39 cddc39 #558b2f 558b2f
#c0ca33 c0ca33 #33691e 33691e
#afb42b afb42b #827717 827717
#9e9d24 9e9d24 #ef6c00 ef6c00
#fffde7 fffde7 #e65100 e65100
#fff9c4 fff9c4 #ff5722 ff5722
#fff59d fff59d #f4511e f4511e
#fff176 fff176 #e64a19 e64a19
#ffee58 ffee58 #d84315 d84315
#ffeb3b ffeb3b #bf360c bf360c
#fdd835 fdd835 #a1887f a1887f
#fbc02d fbc02d #8d6e63 8d6e63
#f9a825 f9a825 #795548 795548
#f57f17 f57f17 #6d4c41 6d4c41
#fff8e1 fff8e1 #5d4037 5d4037
#ffecb3 ffecb3 #4e342e 4e342e
#ffe082 ffe082 #3e2723 3e2723
#ffd54f ffd54f #757575 757575
#ffca28 ffca28 #616161 616161
#ffc107 ffc107 #424242 424242
#ffb300 ffb300 #212121 212121
#ffa000 ffa000 #78909c 78909c
#ff8f00 ff8f00 #607d8b 607d8b
#ff6f00 ff6f00 #546e7a 546e7a
#fff3e0 fff3e0 #455a64 455a64
#ffe0b2 ffe0b2 #37474f 37474f
#ffcc80 ffcc80 #263238 263238
#ffb74d ffb74d
#ffa726 ffa726
#ff9800 ff9800
#fb8c00 fb8c00
#f57c00 f57c00
#fbe9e7 fbe9e7
#ffccbc ffccbc
#ffab91 ffab91
#ff8a65 ff8a65
#ff7043 ff7043
#efebe9 efebe9
#d7ccc8 d7ccc8
#bcaaa4 bcaaa4
#fafafa fafafa
#f5f5f5 f5f5f5
#eeeeee eeeeee
#e0e0e0 e0e0e0
#bdbdbd bdbdbd
#9e9e9e 9e9e9e
#eceff1 eceff1
#cfd8dc cfd8dc
#b0bec5 b0bec5
#90a4ae 90a4ae

More possibilities

Install

npm i @tafalk/material-color-generator

DownloadsWeekly Downloads

18

Version

1.0.6

License

MIT

Unpacked Size

25.1 kB

Total Files

7

Last publish

Collaborators

  • avatar