Color
Color is essential for designing products that offer effective interfaces and enhance user experiences.
Biofarma Primary - Innovation Blue
50
#e6f5f7
100
#b0dfe7
200
#8ad0db
300
#55baca
400
#34adc0
500
#0098b0
600
#008aa0
700
#006c7d
800
#005461
900
#00404a
Biofarma Secondary - Spirit Orange
50
#fff1e6
100
#ffd2b0
200
#ffbc8a
300
#ff9e54
400
#ff8b33
500
#ff6e00
600
#e86400
700
#b54e00
800
#8c3d00
900
#6b2e20
Biofarma Tertiery - Optimist Yellow
50
#fff8e6
100
#ffe9b0
200
#ffdf8a
300
#ffd054
400
#ffc733
500
#ffb900
600
#e8a800
700
#b58300
800
#8c6600
900
#6b4e00
Neutral
50
#f6f8fa
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a
950
#0c1324
Success
50
#ecfdf3
100
#d1fadf
200
#a6f4c5
300
#6ce9a6
400
#32d583
500
#12b76a
600
#039855
700
#027a48
800
#05603a
900
#054f31
Warning
50
#fffaeb
100
#fef0c7
200
#fedf89
300
#fec84b
400
#fdb022
500
#f79009
600
#dc6803
700
#b54708
800
#93370d
900
#7a2e0e
Danger
50
#fef3f2
100
#fee4e2
200
#fecdca
300
#fda29b
400
#f97066
500
#f04438
600
#d92d20
700
#b42318
800
#912018
900
#7a271a
Information
50
#eff8ff
100
#d1e9ff
200
#b2ddff
300
#84caff
400
#53b1fd
500
#2e90fa
600
#1570ef
700
#175cd3
800
#1849a9
900
#194185
Discovery
50
#f4f3ff
100
#ebe9fe
200
#d9d6fe
300
#bdb4fe
400
#9b8afb
500
#7a5af8
600
#6938ef
700
#5925dc
800
#4a1fb8
900
#3e1c96
Black
white
#ffffff
black
#000000
White
100
rgba(255, 255, 255, 0.05)
200
rgba(255, 255, 255, 0.10)
300
rgba(255, 255, 255, 0.20)
400
rgba(255, 255, 255, 0.40)
500
rgba(255, 255, 255, 0.70)
600
rgba(255, 255, 255, 0.80)
700
rgba(255, 255, 255, 0.85)
800
rgba(255, 255, 255, 0.90)
900
rgba(255, 255, 255, 0.95)
1000
rgba(255, 255, 255, 1)
Alpha/Dark
0
rgba(3, 12, 26, 0)
100
rgba(3, 12, 26, 0.05)
200
rgba(3, 12, 26, 0.12)
300
rgba(3, 12, 26, 0.24)
400
rgba(3, 12, 26, 0.48)
500
rgba(3, 12, 26, 0.64)
600
rgba(3, 12, 26, 0.72)
700
rgba(3, 12, 26, 0.92)
Alpha/Light
0
rgba(252, 252, 253, 0)
100
rgba(252, 252, 253, 0.06)
200
rgba(252, 252, 253, 0.12)
300
rgba(252, 252, 253, 0.24)
400
rgba(252, 252, 253, 0.48)
500
rgba(252, 252, 253, 0.64)
600
rgba(252, 252, 253, 0.72)
700
rgba(252, 252, 253, 0.92)
Alpha/Primary
0
rgba(0, 152, 176, 0)
100
rgba(0, 152, 176, 0.08)
200
rgba(0, 152, 176, 0.16)
300
rgba(0, 152, 176, 0.32)
400
rgba(0, 152, 176, 0.64)
500
rgba(0, 152, 176, 0.72)
Alpha/Secondary
0
rgba(255, 110, 0, 0)
100
rgba(255, 110, 0, 0.06)
200
rgba(255, 110, 0, 0.12)
300
rgba(255, 110, 0, 0.32)
400
rgba(255, 110, 0, 0.64)
500
rgba(255, 110, 0, 0.72)
Alpha/Tertiary
0
rgba(255, 185, 0, 0)
100
rgba(255, 185, 0, 0.08)
200
rgba(255, 185, 0, 0.16)
300
rgba(255, 185, 0, 0.32)
400
rgba(255, 185, 0, 0.64)
500
rgba(255, 185, 0, 0.72)
Alpha/Success
0
rgba(18, 183, 106, 0)
100
rgba(18, 183, 106, 0.08)
200
rgba(18, 183, 106, 0.16)
300
rgba(18, 183, 106, 0.32)
400
rgba(18, 183, 106, 0.64)
500
rgba(18, 183, 106, 0.72)
Alpha/Warning
0
rgba(247, 144, 9, 0)
100
rgba(247, 144, 9, 0.08)
200
rgba(247, 144, 9, 0.16)
300
rgba(247, 144, 9, 0.32)
400
rgba(247, 144, 9, 0.64)
500
rgba(247, 144, 9, 0.72)
Alpha/Danger
0
rgba(240, 68, 56, 0)
100
rgba(240, 68, 56, 0.08)
200
rgba(240, 68, 56, 0.16)
300
rgba(240, 68, 56, 0.32)
400
rgba(240, 68, 56, 0.64)
500
rgba(240, 68, 56, 0.72)
Alpha/Information
0
rgba(46, 144, 250, 0)
100
rgba(46, 144, 250, 0.08)
200
rgba(46, 144, 250, 0.16)
300
rgba(46, 144, 250, 0.32)
400
rgba(46, 144, 250, 0.64)
500
rgba(46, 144, 250, 0.72)
Rose
50
#ffebeb
100
#ffcfcf
200
#ffa9a9
300
#ff8282
400
#ff5c5c
500
#ff3838
600
#d93030
700
#b52828
800
#912020
900
#731919
Gold
50
#fcf8f2
100
#f8efe0
200
#f2e2c8
300
#ebd4ae
400
#e6c796
500
#e0bb7f
600
#be9f6c
700
#9f855a
800
#806b48
900
#655439
Zinc
50
#f2f0ef
100
#e0dbd7
200
#c8bfb8
300
#aea297
400
#958678
500
#7e6b5a
600
#6b5b4d
700
#594c40
800
#483d33
900
#393028
Violet
50
#fbebfd
100
#f5cffa
200
#eda9f7
300
#e481f3
400
#dc5bef
500
#d437ec
600
#b42fc9
700
#9727a8
800
#791f87
900
#5f196a
Cyan
50
#e7fafd
100
#c6f3fa
200
#9aeaf7
300
#6ae1f3
400
#3dd8ef
500
#13cfec
600
#10b0c9
700
#0d93a8
800
#0b7687
900
#095d6a
Lime
50
#f4fbe9
100
#e5f6ca
200
#d1efa0
300
#bce874
400
#a7e14a
500
#94da22
600
#7eb91d
700
#699b18
800
#547c13
900
#43620f