Black
SCSS: $color-black
CSS: var(--color-black)
Hex: #000000
RGB: rgb(0, 0, 0)
Colors
Fajny CSS has its own color palette. If you want to use your own colors, you can edit them in the file scss/_variables.scss. You can find a nice color palette generator here: https://coolors.co/.
File to include
@import "variables";White
SCSS: $color-white
CSS: var(--color-white)
Hex: #FFFFFF
RGB: rgb(255, 255, 255)
Gray 50
SCSS: $color-gray-50
CSS: var(--color-gray-50)
Hex: #F8F8F8
RGB: rgb(248, 248, 248)
Gray 100
SCSS: $color-gray-100
CSS: var(--color-gray-100)
Hex: #E4E4E4
RGB: rgb(228, 228, 228)
Gray 200
SCSS: $color-gray-200
CSS: var(--color-gray-200)
Hex: #C8C8C8
RGB: rgb(200, 200, 200)
Gray 300
SCSS: $color-gray-300
CSS: var(--color-gray-300)
Hex: #ADADAD
RGB: rgb(173, 173, 173)
Gray 400
SCSS: $color-gray-400
CSS: var(--color-gray-400)
Hex: #919191
RGB: rgb(145, 145, 145)
Gray 500
SCSS: $color-gray-500
CSS: var(--color-gray-500)
Hex: #767676
RGB: rgb(118, 118, 118)
Gray 600
SCSS: $color-gray-600
CSS: var(--color-gray-600)
Hex: #5E5E5E
RGB: rgb(94, 94, 94)
Gray 700
SCSS: $color-gray-700
CSS: var(--color-gray-700)
Hex: #474747
RGB: rgb(71, 71, 71)
Gray 800
SCSS: $color-gray-800
CSS: var(--color-gray-800)
Hex: #2F2F2F
RGB: rgb(47, 47, 47)
Gray 900
SCSS: $color-gray-900
CSS: var(--color-gray-900)
Hex: #181818
RGB: rgb(24, 24, 24)
Primary 50
SCSS: $color-primary-50
CSS: var(--color-primary-50)
Hex: #F4F6F7
RGB: rgb(244, 246, 247)
Primary 100
SCSS: $color-primary-100
CSS: var(--color-primary-100)
Hex: #D1DAE1
RGB: rgb(209, 218, 225)
Primary 200
SCSS: $color-primary-200
CSS: var(--color-primary-200)
Hex: #A4B5C3
RGB: rgb(164, 181, 195)
Primary 300
SCSS: $color-primary-300
CSS: var(--color-primary-300)
Hex: #768FA4
RGB: rgb(118, 143, 164)
Primary 400
SCSS: $color-primary-400
CSS: var(--color-primary-400)
Hex: #496A86
RGB: rgb(73, 106, 134)
Primary 500
SCSS: $color-primary-500
CSS: var(--color-primary-500)
Hex: #1B4568
RGB: rgb(27, 69, 104)
Primary 600
SCSS: $color-primary-600
CSS: var(--color-primary-600)
Hex: #163753
RGB: rgb(22, 55, 83)
Primary 700
SCSS: $color-primary-700
CSS: var(--color-primary-700)
Hex: #10293E
RGB: rgb(16, 41, 62)
Primary 800
SCSS: $color-primary-800
CSS: var(--color-primary-800)
Hex: #0B1C2A
RGB: rgb(11, 28, 42)
Primary 900
SCSS: $color-primary-900
CSS: var(--color-primary-900)
Hex: #050E15
RGB: rgb(5, 14, 21)
Secondary 50
SCSS: $color-secondary-50
CSS: var(--color-secondary-50)
Hex: #F4F8FD
RGB: rgb(244, 248, 253)
Secondary 100
SCSS: $color-secondary-100
CSS: var(--color-secondary-100)
Hex: #D4E2F6
RGB: rgb(212, 226, 246)
Secondary 200
SCSS: $color-secondary-200
CSS: var(--color-secondary-200)
Hex: #A8C5ED
RGB: rgb(168, 197, 237)
Secondary 300
SCSS: $color-secondary-300
CSS: var(--color-secondary-300)
Hex: #7DA7E5
RGB: rgb(125, 167, 229)
Secondary 400
SCSS: $color-secondary-400
CSS: var(--color-secondary-400)
Hex: #518ADC
RGB: rgb(81, 138, 220)
Secondary 500
SCSS: $color-secondary-500
CSS: var(--color-secondary-500)
Hex: #266DD3
RGB: rgb(38, 109, 211)
Secondary 600
SCSS: $color-secondary-600
CSS: var(--color-secondary-600)
Hex: #1E57A9
RGB: rgb(30, 87, 169)
Secondary 700
SCSS: $color-secondary-700
CSS: var(--color-secondary-700)
Hex: #17417F
RGB: rgb(23, 65, 127)
Secondary 800
SCSS: $color-secondary-800
CSS: var(--color-secondary-800)
Hex: #0F2C54
RGB: rgb(15, 44, 84)
Secondary 900
SCSS: $color-secondary-900
CSS: var(--color-secondary-900)
Hex: #08162A
RGB: rgb(8, 22, 42)
Success 50
SCSS: $color-success-50
CSS: var(--color-success-50)
Hex: #F3F9F6
RGB: rgb(243, 249, 246)
Success 100
SCSS: $color-success-100
CSS: var(--color-success-100)
Hex: #CEE6DB
RGB: rgb(206, 230, 219)
Success 200
SCSS: $color-success-200
CSS: var(--color-success-200)
Hex: #9DCDB7
RGB: rgb(157, 205, 183)
Success 300
SCSS: $color-success-300
CSS: var(--color-success-300)
Hex: #6BB392
RGB: rgb(107, 179, 146)
Success 400
SCSS: $color-success-400
CSS: var(--color-success-400)
Hex: #3A9A6E
RGB: rgb(58, 154, 110)
Success 500
SCSS: $color-success-500
CSS: var(--color-success-500)
Hex: #09814A
RGB: rgb(9, 129, 74)
Success 600
SCSS: $color-success-600
CSS: var(--color-success-600)
Hex: #07673B
RGB: rgb(7, 103, 59)
Success 700
SCSS: $color-success-700
CSS: var(--color-success-700)
Hex: #054D2C
RGB: rgb(5, 77, 44)
Success 800
SCSS: $color-success-800
CSS: var(--color-success-800)
Hex: #04341E
RGB: rgb(4, 52, 30)
Success 900
SCSS: $color-success-900
CSS: var(--color-success-900)
Hex: #021A0F
RGB: rgb(2, 26, 15)
Danger 50
SCSS: $color-danger-50
CSS: var(--color-danger-50)
Hex: #FBF2F4
RGB: rgb(251, 242, 244)
Danger 100
SCSS: $color-danger-100
CSS: var(--color-danger-100)
Hex: #F0CCD1
RGB: rgb(240, 204, 209)
Danger 200
SCSS: $color-danger-200
CSS: var(--color-danger-200)
Hex: #E199A4
RGB: rgb(225, 153, 164)
Danger 300
SCSS: $color-danger-300
CSS: var(--color-danger-300)
Hex: #D16676
RGB: rgb(209, 102, 118)
Danger 400
SCSS: $color-danger-400
CSS: var(--color-danger-400)
Hex: #C23349
RGB: rgb(194, 51, 73)
Danger 500
SCSS: $color-danger-500
CSS: var(--color-danger-500)
Hex: #B3001B
RGB: rgb(179, 0, 27)
Danger 600
SCSS: $color-danger-600
CSS: var(--color-danger-600)
Hex: #8F0016
RGB: rgb(143, 0, 22)
Danger 700
SCSS: $color-danger-700
CSS: var(--color-danger-700)
Hex: #6B0010
RGB: rgb(107, 0, 16)
Danger 800
SCSS: $color-danger-800
CSS: var(--color-danger-800)
Hex: #48000B
RGB: rgb(72, 0, 11)
Danger 900
SCSS: $color-danger-900
CSS: var(--color-danger-900)
Hex: #240005
RGB: rgb(36, 0, 5)
Warning 50
SCSS: $color-warning-50
CSS: var(--color-warning-50)
Hex: #FCF6F2
RGB: rgb(252, 246, 242)
Warning 100
SCSS: $color-warning-100
CSS: var(--color-warning-100)
Hex: #F3DBCC
RGB: rgb(243, 219, 204)
Warning 200
SCSS: $color-warning-200
CSS: var(--color-warning-200)
Hex: #E7B699
RGB: rgb(231, 182, 153)
Warning 300
SCSS: $color-warning-300
CSS: var(--color-warning-300)
Hex: #DC9266
RGB: rgb(220, 146, 102)
Warning 400
SCSS: $color-warning-400
CSS: var(--color-warning-400)
Hex: #D06D33
RGB: rgb(208, 109, 51)
Warning 500
SCSS: $color-warning-500
CSS: var(--color-warning-500)
Hex: #C44900
RGB: rgb(196, 73, 0)
Warning 600
SCSS: $color-warning-600
CSS: var(--color-warning-600)
Hex: #9D3A00
RGB: rgb(157, 58, 0)
Warning 700
SCSS: $color-warning-700
CSS: var(--color-warning-700)
Hex: #762C00
RGB: rgb(118, 44, 0)
Warning 800
SCSS: $color-warning-800
CSS: var(--color-warning-800)
Hex: #4E1D00
RGB: rgb(78, 29, 0)
Warning 900
SCSS: $color-warning-900
CSS: var(--color-warning-900)
Hex: #270F00
RGB: rgb(39, 15, 0)