Skip to content

flexful/colors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flexful UI Colors Library

This library contains the color palette offered by Flexful UI. These colors can be used for modern web applications and websites.

Colors

Color 50 100 200 300 400 500 600 700 800 900 950
Red #FFE6E6 #FFCCCC #FF9999 #FE6666 #FE3333 #FE0000 #CB0000 #980000 #660000 #330000 #190000
Crimson #F8E7E7 #F1CFCE #E39F9D #D46F6C #C63F3B #B80F0A #930C08 #6E0906 #4A0604 #250302 #120101
Grenadier #F8ECEB #F1D9D7 #E4B4AF #D68E86 #C9695E #BB4336 #96362B #702820 #4B1B16 #250D0B #130705
Strawberry #FFEDED #FEDBDC #FEB7B8 #FD9495 #FD7071 #FC4C4E #CA3D3E #972E2F #651E1F #320F10 #190808
Rose #FFF4F7 #FEEAEF #FED4DE #FDBFCE #FDA9BD #FC94AD #CA768A #975968 #653B45 #321E23 #190F11
Pink #FEF5FA #FDEBF5 #FBD7EB #FAC2E1 #F8AED7 #F69ACD #C57BA4 #945C7B #623E52 #311F29 #190F14
Fuchsia #FFEDF7 #FEDAEE #FEB5DD #FD90CC #FD6BBB #FC46AA #CA3888 #972A66 #651C44 #320E22 #190711
Peach #FFF4F3 #FEEAE6 #FDD4CD #FDBFB5 #FCA99C #FB9483 #C97669 #97594F #643B34 #321E1A #190F0D
Orange #FDF1E8 #FBE2D0 #F8C6A1 #F4A972 #F18D43 #ED7014 #BE5A10 #8E430C #5F2D08 #2F1604 #180B02
Amber #F3EAE6 #E7D6CC #D0AD99 #B88367 #A15A34 #893101 #6E2701 #521D01 #371400 #1B0A00 #0E0500
Tiger #FFF0E6 #FEE1CC #FEC49A #FDA667 #FD8935 #FC6B02 #CA5602 #974001 #652B01 #321500 #190B00
Gold #FEF6E6 #FEEDCC #FDDB9A #FBCA67 #FAB835 #F9A602 #C78502 #956401 #644201 #322100 #191100
Yellow #FFFAEA #FEF6D4 #FEEDAA #FDE37F #FDDA55 #FCD12A #CAA722 #977D19 #655411 #322A08 #191504
Lemon #FDFFEF #FCFFDF #F9FEBF #F5FE9F #F2FD7F #EFFD5F #BFCA4C #8F9839 #606526 #303313 #181909
Cream #FFFFFB #FFFEF8 #FFFDF0 #FFFCE9 #FFFBE1 #FFFADA #CCC8AE #999683 #666457 #33322C #191916
Lavender #FCF5FE #F9ECFD #F3D9FB #EEC5FA #E8B2F8 #E29FF6 #B57FC5 #885F94 #5A4062 #2D2031 #171019
Purple #F6EAF9 #EDD5F3 #DAABE7 #C880DC #B556D0 #A32CC4 #82239D #621A76 #41124E #210927 #100414
Violet #F1E6F4 #E3CCE9 #C699D4 #AA67BE #8D34A9 #710193 #5A0176 #440158 #2D003B #17001D #0B000F
Magenta #F6E6EE #ECCDDE #D99BBD #C7699B #B4377A #A10559 #810447 #610335 #400224 #200112 #100009
Grape #F0EAED #E0D6DA #C2ACB5 #A38391 #85596C #663047 #522639 #3D1D2B #29131C #140A0E #0A0507
Green #EBF7EC #D8EFD9 #B1E0B4 #89D08E #62C169 #3BB143 #2F8E36 #236A28 #18471B #0C230D #061207
Emerald #E6F3E7 #CCE7CF #9AD09F #67B870 #35A140 #028910 #026E0D #01520A #013706 #001B03 #000E02
Sea #ECFDF5 #D8FBEA #B1F7D5 #8AF4C1 #63F0AC #3CEC97 #30BD79 #248E5B #185E3C #0C2F1E #06180F
Pistachio #F7FBF9 #F0F6F3 #E0EDE7 #D1E5DA #C1DCCE #B2D3C2 #8EA99B #6B7F74 #47544E #242A27 #121513
Sage #F1F4F0 #E3E8E1 #C7D1C3 #AABAA5 #8EA387 #728C69 #5B7054 #44543F #2E382A #171C15 #0B0E0A
Pear #F1F8EA #E3F0D5 #C7E2AB #ACD380 #90C556 #74B62C #5D9223 #466D1A #2E4912 #172409 #0C1204
Lime #F7FEF0 #EFFDDE #DFFABD #CEF89C #BEF57B #AEF35A #8BC248 #689236 #466124 #233112 #111809
Blue #EBECF8 #D8D9F1 #B0B4E3 #898ED6 #6169C8 #3A43BA #2E3695 #232870 #171B4A #0C0D25 #060713
Lapis #E9EBF9 #D4D6F3 #A9ADE7 #7D84DA #525BCE #2732C2 #1F289B #171E74 #10144E #080A27 #040513
Navy #E7E7F1 #CECFE3 #9DA0C6 #6D70AA #3C418D #0B1171 #090E5A #070A44 #04072D #020317 #01020B
Indigo #EAE9EF #D4D2DF #A9A5BE #7E789E #534B7D #281E5D #20184A #181238 #100C25 #080613 #040309
Aegean #E9ECF1 #D2DAE2 #A5B5C5 #788FA8 #4B6A8B #1E456E #183758 #122942 #0C1C2C #060E16 #03070B
Ocean #E6EFF0 #CCDFE0 #99BFC1 #67A0A2 #348083 #016064 #014D50 #013A3C #002628 #001314 #000A0A
Snow #FDFFFF #FBFEFE #F7FEFE #F4FDFD #F0FDFD #ECFCFC #BDcACA #8E9797 #5E6565 #2F3232 #181919
Stone #EEF2F4 #DEE4E8 #BDC9D1 #9BAEBB #7A93A4 #59788D #476071 #354855 #243038 #12181C #090C0E
Slate #F1F2F3 #E3E5E7 #C8CACF #ACB0B7 #91959F #757B87 #5E626C #464A51 #2F3136 #17191B #0C0C0D
Gray #F9F9FA #F4F4F6 #E8E8EC #DDDDE3 #D1D1D9 #C6C6D0 #9E9EA6 #77777D #4F4F53 #28282A #141415
Silver #F7F7F9 #EFEFF4 #DEDEE9 #CECEDD #BDBDD2 #ADADC7 #8A8A9F #686877 #454550 #232328 #111114
Dove #F2F1F2 #E5E2E5 #CBC5CC #B0A8B2 #968B99 #7C6E7F #635866 #4A424C #322C33 #191619 #0C0B0D
Sky #EFF9FB #E0F3F8 #C0E8F0 #A1DCE9 #81D1E1 #62C5DA #4E9EAE #3B7683 #274F57 #14272C #0A1416
Brown #EAE8E6 #D5D0CD #ABA19A #807368 #564435 #2C1503 #231102 #1A0D02 #120801 #090401 #040200
Peanut #F2EFEb #E4DED6 #C9BEAE #AF9D85 #947D5D #795C34 #614A2A #49371F #302515 #18120A #0C0905

How to Use

To use our colors, simply add the following code to your project's CSS file:

@import "@flexful-ui/colors";
/* Now you can use the colors in your CSS */
.element {
  background-color: var(--red-50);
  color: var(--blue-500);
}

Usage in JavaScript

import colors from '@flexful-ui/colors';