Framer Colors - X UI Kit

ᛝ

All components

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

All components

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

All components

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

⚠ The color palette will adapt to your theme

Background Colors

surface-1

#111111

#FFFFFF

surface-1

#111111

#FFFFFF

surface-1

#111111

#FFFFFF

surface-2

#252525

#EEEEEE

surface-2

#252525

#EEEEEE

surface-2

#252525

#EEEEEE

Text Colors

light-primary

#FFFFFF · 100%

#1A1A1A · 100%

light-primary

#FFFFFF · 100%

#1A1A1A · 100%

light-primary

#FFFFFF · 100%

#1A1A1A · 100%

light-secondary

#FFFFFF · 70%

#1A1A1A · 70%

light-secondary

#FFFFFF · 70%

#1A1A1A · 70%

light-secondary

#FFFFFF · 70%

#1A1A1A · 70%

light-tertiary

#FFFFFF · 36%

#1A1A1A · 36%

light-tertiary

#FFFFFF · 36%

#1A1A1A · 36%

light-tertiary

#FFFFFF · 36%

#1A1A1A · 36%

dark-primary

#1A1A1A · 100%

#FFFFFF · 100%

dark-primary

#1A1A1A · 100%

#FFFFFF · 100%

dark-primary

#1A1A1A · 100%

#FFFFFF · 100%

dark-secondary

#1A1A1A · 70%

#FFFFFF · 70%

dark-secondary

#1A1A1A · 70%

#FFFFFF · 70%

dark-secondary

#1A1A1A · 70%

#FFFFFF · 70%

dark-tertiary

#1A1A1A · 36%

#FFFFFF · 36%

dark-tertiary

#1A1A1A · 36%

#FFFFFF · 36%

dark-tertiary

#1A1A1A · 36%

#FFFFFF · 36%

Alpha Light Colors

light-00

#FFFFFF · 0%

#000000 · 0%

light-00

#FFFFFF · 0%

#000000 · 0%

light-00

#FFFFFF · 0%

#000000 · 0%

light-50

#FFFFFF · 8%

#000000 · 8%

light-50

#FFFFFF · 8%

#000000 · 8%

light-50

#FFFFFF · 8%

#000000 · 8%

light-100

#FFFFFF · 10%

#000000 · 10%

light-100

#FFFFFF · 10%

#000000 · 10%

light-100

#FFFFFF · 10%

#000000 · 10%

light-200

#FFFFFF · 20%

#000000 · 20%

light-200

#FFFFFF · 20%

#000000 · 20%

light-200

#FFFFFF · 20%

#000000 · 20%

light-300

#FFFFFF · 30%

#000000 · 30%

light-300

#FFFFFF · 30%

#000000 · 30%

light-300

#FFFFFF · 30%

#000000 · 30%

light-400

#FFFFFF · 40%

#000000 · 40%

light-400

#FFFFFF · 40%

#000000 · 40%

light-400

#FFFFFF · 40%

#000000 · 40%

light-500

#FFFFFF · 50%

#000000 · 50%

light-500

#FFFFFF · 50%

#000000 · 50%

light-500

#FFFFFF · 50%

#000000 · 50%

light-600

#FFFFFF · 60%

#000000 · 60%

light-600

#FFFFFF · 60%

#000000 · 60%

light-600

#FFFFFF · 60%

#000000 · 60%

light-700

#FFFFFF · 70%

#000000 · 70%

light-700

#FFFFFF · 70%

#000000 · 70%

light-700

#FFFFFF · 70%

#000000 · 70%

light-800

#FFFFFF · 80%

#000000 · 80%

light-800

#FFFFFF · 80%

#000000 · 80%

light-800

#FFFFFF · 80%

#000000 · 80%

light-900

#FFFFFF · 100%

#000000 · 100%

light-900

#FFFFFF · 100%

#000000 · 100%

light-900

#FFFFFF · 100%

#000000 · 100%

Alpha Dark Colors

dark-00

#000000 · 0%

#FFFFFF · 0%

dark-00

#000000 · 0%

#FFFFFF · 0%

dark-00

#000000 · 0%

#FFFFFF · 0%

dark-50

#000000 · 8%

#FFFFFF · 8%

dark-50

#000000 · 8%

#FFFFFF · 8%

dark-50

#000000 · 8%

#FFFFFF · 8%

dark-100

#000000 · 10%

#FFFFFF · 10%

dark-100

#000000 · 10%

#FFFFFF · 10%

dark-100

#000000 · 10%

#FFFFFF · 10%

dark-200

#000000 · 20%

#FFFFFF · 20%

dark-200

#000000 · 20%

#FFFFFF · 20%

dark-200

#000000 · 20%

#FFFFFF · 20%

dark-300

#000000 · 30%

#FFFFFF · 30%

dark-300

#000000 · 30%

#FFFFFF · 30%

dark-300

#000000 · 30%

#FFFFFF · 30%

dark-400

#000000 · 40%

#FFFFFF · 40%

dark-400

#000000 · 40%

#FFFFFF · 40%

dark-400

#000000 · 40%

#FFFFFF · 40%

dark-500

#000000 · 50%

#FFFFFF · 50%

dark-500

#000000 · 50%

#FFFFFF · 50%

dark-500

#000000 · 50%

#FFFFFF · 50%

dark-600

#000000 · 60%

#FFFFFF · 60%

dark-600

#000000 · 60%

#FFFFFF · 60%

dark-600

#000000 · 60%

#FFFFFF · 60%

dark-700

#000000 · 70%

#FFFFFF · 70%

dark-700

#000000 · 70%

#FFFFFF · 70%

dark-700

#000000 · 70%

#FFFFFF · 70%

dark-800

#000000 · 80%

#FFFFFF · 80%

dark-800

#000000 · 80%

#FFFFFF · 80%

dark-800

#000000 · 80%

#FFFFFF · 80%

dark-900

#000000 · 100%

#FFFFFF · 100%

dark-900

#000000 · 100%

#FFFFFF · 100%

dark-900

#000000 · 100%

#FFFFFF · 100%

Gray Colors

gray-50

#231F1F

#FCFCFC

gray-50

#231F1F

#FCFCFC

gray-50

#231F1F

#FCFCFC

gray-100

#333333

#F4F4F5

gray-100

#333333

#F4F4F5

gray-100

#333333

#F4F4F5

gray-200

#3D3D3D

#E1E1E2

gray-200

#3D3D3D

#E1E1E2

gray-200

#3D3D3D

#E1E1E2

gray-300

#5F5F5F

#D0D0D4

gray-300

#5F5F5F

#D0D0D4

gray-300

#5F5F5F

#D0D0D4

gray-400

#747474

#A1A1AA

gray-400

#747474

#A1A1AA

gray-400

#747474

#A1A1AA

gray-500

#878787

#7A7A83

gray-500

#878787

#7A7A83

gray-500

#878787

#7A7A83

gray-600

#9B9B9B

#52525B

gray-600

#9B9B9B

#52525B

gray-600

#9B9B9B

#52525B

gray-700

#B9B9B9

#3F3F46

gray-700

#B9B9B9

#3F3F46

gray-700

#B9B9B9

#3F3F46

gray-800

#D7D7D7

#27272A

gray-800

#D7D7D7

#27272A

gray-800

#D7D7D7

#27272A

gray-900

#EFEFEF

#1D1D20

gray-900

#EFEFEF

#1D1D20

gray-900

#EFEFEF

#1D1D20

Bronze Colors

bronze-50

#1C1917

#FAFAF9

bronze-50

#1C1917

#FAFAF9

bronze-50

#1C1917

#FAFAF9

bronze-100

#2C2726

#F5F5F4

bronze-100

#2C2726

#F5F5F4

bronze-100

#2C2726

#F5F5F4

bronze-200

#4F4944

#E7E5E4

bronze-200

#4F4944

#E7E5E4

bronze-200

#4F4944

#E7E5E4

bronze-300

#5E5A56

#D6D3D1

bronze-300

#5E5A56

#D6D3D1

bronze-300

#5E5A56

#D6D3D1

bronze-400

#78726D

#A8A29F

bronze-400

#78726D

#A8A29F

bronze-400

#78726D

#A8A29F

bronze-500

#A8A29F

#78726D

bronze-500

#A8A29F

#78726D

bronze-500

#A8A29F

#78726D

bronze-600

#D6D3D1

#56524E

bronze-600

#D6D3D1

#56524E

bronze-600

#D6D3D1

#56524E

bronze-700

#E7E5E4

#44403C

bronze-700

#E7E5E4

#44403C

bronze-700

#E7E5E4

#44403C

bronze-800

#F5F5F4

#292524

bronze-800

#F5F5F4

#292524

bronze-800

#F5F5F4

#292524

bronze-900

#FAFAF9

#1C1A17

bronze-900

#FAFAF9

#1C1A17

bronze-900

#FAFAF9

#1C1A17

Metal Colors

metal-50

#121721

#F4F9FA

metal-50

#121721

#F4F9FA

metal-50

#121721

#F4F9FA

metal-100

#242E3D

#F0F2F4

metal-100

#242E3D

#F0F2F4

metal-100

#242E3D

#F0F2F4

metal-200

#394251

#DFE2E7

metal-200

#394251

#DFE2E7

metal-200

#394251

#DFE2E7

metal-300

#49525F

#C6CBD2

metal-300

#49525F

#C6CBD2

metal-300

#49525F

#C6CBD2

metal-400

#747D90

#929AAA

metal-400

#747D90

#929AAA

metal-400

#747D90

#929AAA

metal-500

#969DAB

#696F7D

metal-500

#969DAB

#696F7D

metal-500

#969DAB

#696F7D

metal-600

#C9CDD4

#3D444D

metal-600

#C9CDD4

#3D444D

metal-600

#C9CDD4

#3D444D

metal-700

#DFE2E7

#2B3340

metal-700

#DFE2E7

#2B3340

metal-700

#DFE2E7

#2B3340

metal-800

#F3F4F6

#202A36

metal-800

#F3F4F6

#202A36

metal-800

#F3F4F6

#202A36

metal-900

#F9FAFB

#151B28

metal-900

#F9FAFB

#151B28

metal-900

#F9FAFB

#151B28

Blue Gray Colors

blue-gray-50

#0C101C

#F8FAFC

blue-gray-50

#0C101C

#F8FAFC

blue-gray-50

#0C101C

#F8FAFC

blue-gray-100

#1A2332

#F1F5F9

blue-gray-100

#1A2332

#F1F5F9

blue-gray-100

#1A2332

#F1F5F9

blue-gray-200

#252E3C

#E1E7EF

blue-gray-200

#252E3C

#E1E7EF

blue-gray-200

#252E3C

#E1E7EF

blue-gray-300

#323B49

#C8D6E5

blue-gray-300

#323B49

#C8D6E5

blue-gray-300

#323B49

#C8D6E5

blue-gray-400

#5E6D82

#9EACC0

blue-gray-400

#5E6D82

#9EACC0

blue-gray-400

#5E6D82

#9EACC0

blue-gray-500

#8B9BB2

#65758B

blue-gray-500

#8B9BB2

#65758B

blue-gray-500

#8B9BB2

#65758B

blue-gray-600

#B1C0D2

#48566A

blue-gray-600

#B1C0D2

#48566A

blue-gray-600

#B1C0D2

#48566A

blue-gray-700

#D4DCE8

#344256

blue-gray-700

#D4DCE8

#344256

blue-gray-700

#D4DCE8

#344256

blue-gray-800

#E2EBF3

#1D283A

blue-gray-800

#E2EBF3

#1D283A

blue-gray-800

#E2EBF3

#1D283A

blue-gray-900

#F8FAFC

#0F1729

blue-gray-900

#F8FAFC

#0F1729

blue-gray-900

#F8FAFC

#0F1729

Blue Colors

blue-50

#181D34

#F2F7FF

blue-50

#181D34

#F2F7FF

blue-50

#181D34

#F2F7FF

blue-100

#062670

#DCEBFE

blue-100

#062670

#DCEBFE

blue-100

#062670

#DCEBFE

blue-200

#0B3AB3

#BEDBFE

blue-200

#0B3AB3

#BEDBFE

blue-200

#0B3AB3

#BEDBFE

blue-300

#0F59E2

#91C3FD

blue-300

#0F59E2

#91C3FD

blue-300

#0F59E2

#91C3FD

blue-400

#1B67E0

#61A6FA

blue-400

#1B67E0

#61A6FA

blue-400

#1B67E0

#61A6FA

blue-500

#1C79EB

blue-500

#1C79EB

blue-500

#1C79EB

blue-600

#1C86FF

#1559EA

blue-600

#1C86FF

#1559EA

blue-600

#1C86FF

#1559EA

blue-700

#7AB7FF

#173FAB

blue-700

#7AB7FF

#173FAB

blue-700

#7AB7FF

#173FAB

blue-800

#DCEBFE

#162F82

blue-800

#DCEBFE

#162F82

blue-800

#DCEBFE

#162F82

blue-900

#F0F6FF

#0C1736

blue-900

#F0F6FF

#0C1736

blue-900

#F0F6FF

#0C1736

Sky Blue Colors

sky-blue-50

#051F2E

#F0F9FF

sky-blue-50

#051F2E

#F0F9FF

sky-blue-50

#051F2E

#F0F9FF

sky-blue-100

#043752

#DCF1FE

sky-blue-100

#043752

#DCF1FE

sky-blue-100

#043752

#DCF1FE

sky-blue-200

#024C73

#ABDFFD

sky-blue-200

#024C73

#ABDFFD

sky-blue-200

#024C73

#ABDFFD

sky-blue-300

#02699D

#6ECFFC

sky-blue-300

#02699D

#6ECFFC

sky-blue-300

#02699D

#6ECFFC

sky-blue-400

#0B8ECB

#2BBAF7

sky-blue-400

#0B8ECB

#2BBAF7

sky-blue-400

#0B8ECB

#2BBAF7

sky-blue-500

#35BDF8

#0F9EE1

sky-blue-500

#35BDF8

#0F9EE1

sky-blue-500

#35BDF8

#0F9EE1

sky-blue-600

#78D2FC

#027AB6

sky-blue-600

#78D2FC

#027AB6

sky-blue-600

#78D2FC

#027AB6

sky-blue-700

#B5E3FD

#02527D

sky-blue-700

#B5E3FD

#02527D

sky-blue-700

#B5E3FD

#02527D

sky-blue-800

#DCF1FE

#053A57

sky-blue-800

#DCF1FE

#053A57

sky-blue-800

#DCF1FE

#053A57

sky-blue-900

#F0F9FF

#062537

sky-blue-900

#F0F9FF

#062537

sky-blue-900

#F0F9FF

#062537

Indigo Colors

indigo-50

#141235

#F3F6FF

indigo-50

#141235

#F3F6FF

indigo-50

#141235

#F3F6FF

indigo-100

#2A247B

#E0E8FF

indigo-100

#2A247B

#E0E8FF

indigo-100

#2A247B

#E0E8FF

indigo-200

#342BA1

#C8D3FE

indigo-200

#342BA1

#C8D3FE

indigo-200

#342BA1

#C8D3FE

indigo-300

#3D34EA

#AAB8FF

indigo-300

#3D34EA

#AAB8FF

indigo-300

#3D34EA

#AAB8FF

indigo-400

#6467F2

#8C96FC

indigo-400

#6467F2

#8C96FC

indigo-400

#6467F2

#8C96FC

indigo-500

#828DF8

#6B6EF8

indigo-500

#828DF8

#6B6EF8

indigo-500

#828DF8

#6B6EF8

indigo-600

#A6B4FC

#5048E5

indigo-600

#A6B4FC

#5048E5

indigo-600

#A6B4FC

#5048E5

indigo-700

#C8D3FE

#3A2FB2

indigo-700

#C8D3FE

#3A2FB2

indigo-700

#C8D3FE

#3A2FB2

indigo-800

#E0E8FF

#26206F

indigo-800

#E0E8FF

#26206F

indigo-800

#E0E8FF

#26206F

indigo-900

#F0F3FF

#17163C

indigo-900

#F0F3FF

#17163C

indigo-900

#F0F3FF

#17163C

Purple Colors

purple-50

#261236

#FAF5FF

purple-50

#261236

#FAF5FF

purple-50

#261236

#FAF5FF

purple-100

#461A66

#F2E5FF

purple-100

#461A66

#F2E5FF

purple-100

#461A66

#F2E5FF

purple-200

#6B1DAF

#EAD6FF

purple-200

#6B1DAF

#EAD6FF

purple-200

#6B1DAF

#EAD6FF

purple-300

#8B25E4

#D3A9FE

purple-300

#8B25E4

#D3A9FE

purple-300

#8B25E4

#D3A9FE

purple-400

#AB57FF

#B774FC

purple-400

#AB57FF

#B774FC

purple-400

#AB57FF

#B774FC

purple-500

#D07FFF

#A046F6

purple-500

#D07FFF

#A046F6

purple-500

#D07FFF

#A046F6

purple-600

#E9A0FF

#8318E7

purple-600

#E9A0FF

#8318E7

purple-600

#E9A0FF

#8318E7

purple-700

#FFBCFF

#7620C1

purple-700

#FFBCFF

#7620C1

purple-700

#FFBCFF

#7620C1

purple-800

#FFD6FF

#5F1E95

purple-800

#FFD6FF

#5F1E95

purple-800

#FFD6FF

#5F1E95

purple-900

#FFEFFF

#381254

purple-900

#FFEFFF

#381254

purple-900

#FFEFFF

#381254

Fuchsia Colors

fuchsia-50

#330836

#FDF5FF

fuchsia-50

#330836

#FDF5FF

fuchsia-50

#330836

#FDF5FF

fuchsia-100

#591160

#F9E5FF

fuchsia-100

#591160

#F9E5FF

fuchsia-100

#591160

#F9E5FF

fuchsia-200

#7A1683

#F3C8FE

fuchsia-200

#7A1683

#F3C8FE

fuchsia-200

#7A1683

#F3C8FE

fuchsia-300

#A421B5

#ED9DFB

fuchsia-300

#A421B5

#ED9DFB

fuchsia-300

#A421B5

#ED9DFB

fuchsia-400

#D535ED

#E66DF8

fuchsia-400

#D535ED

#E66DF8

fuchsia-400

#D535ED

#E66DF8

fuchsia-500

#E87BF9

#D73FEE

fuchsia-500

#E87BF9

#D73FEE

fuchsia-500

#E87BF9

#D73FEE

fuchsia-600

#F0ABFC

#B725CA

fuchsia-600

#F0ABFC

#B725CA

fuchsia-600

#F0ABFC

#B725CA

fuchsia-700

#F5D2FE

#8B1995

fuchsia-700

#F5D2FE

#8B1995

fuchsia-700

#F5D2FE

#8B1995

fuchsia-800

#F9E5FF

#611268

fuchsia-800

#F9E5FF

#611268

fuchsia-800

#F9E5FF

#611268

fuchsia-900

#FDF5FF

#400F43

fuchsia-900

#FDF5FF

#400F43

fuchsia-900

#FDF5FF

#400F43

Cyan Colors

cyan-50

#0A2833

#EBFEFF

cyan-50

#0A2833

#EBFEFF

cyan-50

#0A2833

#EBFEFF

cyan-100

#114D5F

#A5F6FD

cyan-100

#114D5F

#A5F6FD

cyan-100

#114D5F

#A5F6FD

cyan-200

#0E708B

#6BEBFA

cyan-200

#0E708B

#6BEBFA

cyan-200

#0E708B

#6BEBFA

cyan-300

#0887A6

#2CDFF7

cyan-300

#0887A6

#2CDFF7

cyan-300

#0887A6

#2CDFF7

cyan-400

#07A9C5

#10B7D1

cyan-400

#07A9C5

#10B7D1

cyan-400

#07A9C5

#10B7D1

cyan-500

#20D3EE

#058EA3

cyan-500

#20D3EE

#058EA3

cyan-500

#20D3EE

#058EA3

cyan-600

#20D3EE

#066B84

cyan-600

#20D3EE

#066B84

cyan-600

#20D3EE

#066B84

cyan-700

#67E8F9

#094F62

cyan-700

#67E8F9

#094F62

cyan-700

#67E8F9

#094F62

cyan-800

#CDFAFE

#0C3845

cyan-800

#CDFAFE

#0C3845

cyan-800

#CDFAFE

#0C3845

cyan-900

#EBFEFF

#0B2832

cyan-900

#EBFEFF

#0B2832

cyan-900

#EBFEFF

#0B2832

Teal Colors

teal-50

#092524

#E7FFF8

teal-50

#092524

#E7FFF8

teal-50

#092524

#E7FFF8

teal-100

#0B3D3A

#CBFBF0

teal-100

#0B3D3A

#CBFBF0

teal-100

#0B3D3A

#CBFBF0

teal-200

#0B514C

#98F6E3

teal-200

#0B514C

#98F6E3

teal-200

#0B514C

#98F6E3

teal-300

#11736B

#5DEAD5

teal-300

#11736B

#5DEAD5

teal-300

#11736B

#5DEAD5

teal-400

#12A18F

#2BD4BD

teal-400

#12A18F

#2BD4BD

teal-400

#12A18F

#2BD4BD

teal-500

#28C3AE

#14B8A5

teal-500

#28C3AE

#14B8A5

teal-500

#28C3AE

#14B8A5

teal-600

#5DEAD5

#0C887E

teal-600

#5DEAD5

#0C887E

teal-600

#5DEAD5

#0C887E

teal-700

#98F6E3

#0E6C65

teal-700

#98F6E3

#0E6C65

teal-700

#98F6E3

#0E6C65

teal-800

#CBFBF0

#0C4542

teal-800

#CBFBF0

#0C4542

teal-800

#CBFBF0

#0C4542

teal-900

#F2FDFA

#0C312F

teal-900

#F2FDFA

#0C312F

teal-900

#F2FDFA

#0C312F

Green Colors

green-50

#0D3117

#F2FDF5

green-50

#0D3117

#F2FDF5

green-50

#0D3117

#F2FDF5

green-100

#14522D

#DEFCE9

green-100

#14522D

#DEFCE9

green-100

#14522D

#DEFCE9

green-200

#166434

#BBF7D0

green-200

#166434

#BBF7D0

green-200

#166434

#BBF7D0

green-300

#119541

#61EA94

green-300

#119541

#61EA94

green-300

#119541

#61EA94

green-400

#30D96E

green-400

#30D96E

green-400

#30D96E

green-500

#4ADE80

#18B451

green-500

#4ADE80

#18B451

green-500

#4ADE80

#18B451

green-600

#85EFAC

#149041

green-600

#85EFAC

#149041

green-600

#85EFAC

#149041

green-700

#BBF7D0

#137236

green-700

#BBF7D0

#137236

green-700

#BBF7D0

#137236

green-800

#DEFCE9

#196636

green-800

#DEFCE9

#196636

green-800

#DEFCE9

#196636

green-900

#F2FDF5

#0E3F22

green-900

#F2FDF5

#0E3F22

green-900

#F2FDF5

#0E3F22

Emerald Colors

emerald-50

#042A20

#F0FDF7

emerald-50

#042A20

#F0FDF7

emerald-50

#042A20

#F0FDF7

emerald-100

#054835

#C8F9E0

emerald-100

#054835

#C8F9E0

emerald-100

#054835

#C8F9E0

emerald-200

#036347

#A2FBD2

emerald-200

#036347

#A2FBD2

emerald-200

#036347

#A2FBD2

emerald-300

#059467

#6EE7B7

emerald-300

#059467

#6EE7B7

emerald-300

#059467

#6EE7B7

emerald-400

#0EA472

#36D399

emerald-400

#0EA472

#36D399

emerald-400

#0EA472

#36D399

emerald-500

#36D399

#10B77F

emerald-500

#36D399

#10B77F

emerald-500

#36D399

#10B77F

emerald-600

#6EE7B7

#047B56

emerald-600

#6EE7B7

#047B56

emerald-600

#6EE7B7

#047B56

emerald-700

#A5F3CF

#036348

emerald-700

#A5F3CF

#036348

emerald-700

#A5F3CF

#036348

emerald-800

#D1FAE5

#054835

emerald-800

#D1FAE5

#054835

emerald-800

#D1FAE5

#054835

emerald-900

#EDFDF5

#042F24

emerald-900

#EDFDF5

#042F24

emerald-900

#EDFDF5

#042F24

Lime Colors

lime-50

#182707

#F7FEE7

lime-50

#182707

#F7FEE7

lime-50

#182707

#F7FEE7

lime-100

#2F490D

#E9FCC5

lime-100

#2F490D

#E9FCC5

lime-100

#2F490D

#E9FCC5

lime-200

#3E650B

#D5F895

lime-200

#3E650B

#D5F895

lime-200

#3E650B

#D5F895

lime-300

#5B940A

#BAF15B

lime-300

#5B940A

#BAF15B

lime-300

#5B940A

#BAF15B

lime-400

#6AA70E

#91D624

lime-400

#6AA70E

#91D624

lime-400

#6AA70E

#91D624

lime-500

#8BCC23

#6BA80F

lime-500

#8BCC23

#6BA80F

lime-500

#8BCC23

#6BA80F

lime-600

#BEF263

#5B930B

lime-600

#BEF263

#5B930B

lime-600

#BEF263

#5B930B

lime-700

#D9F99F

#365908

lime-700

#D9F99F

#365908

lime-700

#D9F99F

#365908

lime-800

#EBFCCA

#24380A

lime-800

#EBFCCA

#24380A

lime-800

#EBFCCA

#24380A

lime-900

#F7FEE7

#182509

lime-900

#F7FEE7

#182509

lime-900

#F7FEE7

#182509

Yellow Colors

yellow-50

#322910

#FEFCE7

yellow-50

#322910

#FEFCE7

yellow-50

#322910

#FEFCE7

yellow-100

#663A08

#FEF9C3

yellow-100

#663A08

#FEF9C3

yellow-100

#663A08

#FEF9C3

yellow-200

#A26107

#FEF08B

yellow-200

#A26107

#FEF08B

yellow-200

#A26107

#FEF08B

yellow-300

#C88A04

#FFE561

yellow-300

#C88A04

#FFE561

yellow-300

#C88A04

#FFE561

yellow-400

#E7B008

#FAC905

yellow-400

#E7B008

#FAC905

yellow-400

#E7B008

#FAC905

yellow-500

#FACC14

#D9A508

yellow-500

#FACC14

#D9A508

yellow-500

#FACC14

#D9A508

yellow-600

#FACC14

#D9A508

yellow-600

#FACC14

#D9A508

yellow-600

#FACC14

#D9A508

yellow-700

#FEF08B

#935806

yellow-700

#FEF08B

#935806

yellow-700

#FEF08B

#935806

yellow-800

#FEFACB

#73430C

yellow-800

#FEFACB

#73430C

yellow-800

#FEFACB

#73430C

yellow-900

#FEFCE6

#4F2B0C

yellow-900

#FEFCE6

#4F2B0C

yellow-900

#FEFCE6

#4F2B0C

Orange Colors

orange-50

#31160D

#FFF6EB

orange-50

#31160D

#FFF6EB

orange-50

#31160D

#FFF6EB

orange-100

#852C0F

#FFEDD6

orange-100

#852C0F

#FFEDD6

orange-100

#852C0F

#FFEDD6

orange-200

#AB4827

#FED6A9

orange-200

#AB4827

#FED6A9

orange-200

#AB4827

#FED6A9

orange-300

#CE5A07

#FDBA72

orange-300

#CE5A07

#FDBA72

orange-300

#CE5A07

#FDBA72

orange-400

#F27013

#FB923C

orange-400

#F27013

#FB923C

orange-400

#F27013

#FB923C

orange-500

#FB923C

#F67416

orange-500

#FB923C

#F67416

orange-500

#FB923C

#F67416

orange-600

#FDBA72

#E4570C

orange-600

#FDBA72

#E4570C

orange-600

#FDBA72

#E4570C

orange-700

#FED6A9

#B63C0B

orange-700

#FED6A9

#B63C0B

orange-700

#FED6A9

#B63C0B

orange-800

#FFEDD6

#80310F

orange-800

#FFEDD6

#80310F

orange-800

#FFEDD6

#80310F

orange-900

#FFF6EB

#471A0A

orange-900

#FFF6EB

#471A0A

orange-900

#FFF6EB

#471A0A

Red Colors

red-50

#461A1A

#FEF1F1

red-50

#461A1A

#FEF1F1

red-50

#461A1A

#FEF1F1

red-100

#6B1919

#FFDCDC

red-100

#6B1919

#FFDCDC

red-100

#6B1919

#FFDCDC

red-200

#A42828

#FFC9C9

red-200

#A42828

#FFC9C9

red-200

#A42828

#FFC9C9

red-300

#DC3D3D

#FFA0A0

red-300

#DC3D3D

#FFA0A0

red-300

#DC3D3D

#FFA0A0

red-400

#FA4D4D

#FF6565

red-400

#FA4D4D

#FF6565

red-400

#FA4D4D

#FF6565

red-500

#FF6262

#EF4343

red-500

#FF6262

#EF4343

red-500

#FF6262

#EF4343

red-600

#FF7575

#DC2828

red-600

#FF7575

#DC2828

red-600

#FF7575

#DC2828

red-700

#FFA7A7

#B11B1B

red-700

#FFA7A7

#B11B1B

red-700

#FFA7A7

#B11B1B

red-800

#FFBBBB

#821717

red-800

#FFBBBB

#821717

red-800

#FFBBBB

#821717

red-900

#FED0D0

#531313

red-900

#FED0D0

#531313

red-900

#FED0D0

#531313

Rose Colors

rose-50

#430A1B

#FFF0F1

rose-50

#430A1B

#FFF0F1

rose-50

#430A1B

#FFF0F1

rose-100

#6A0C26

#FFE5E7

rose-100

#6A0C26

#FFE5E7

rose-100

#6A0C26

#FFE5E7

rose-200

#A81036

#FEC3CA

rose-200

#A81036

#FEC3CA

rose-200

#A81036

#FEC3CA

rose-300

#D11A42

#FD9BA6

rose-300

#D11A42

#FD9BA6

rose-300

#D11A42

#FD9BA6

rose-400

#F43E5C

#FB657C

rose-400

#F43E5C

#FB657C

rose-400

#F43E5C

#FB657C

rose-500

#FB6F84

#F33454

rose-500

#FB6F84

#F33454

rose-500

#FB6F84

#F33454

rose-600

#FDA5AF

#CB1A41

rose-600

#FDA5AF

#CB1A41

rose-600

#FDA5AF

#CB1A41

rose-700

#FECDD3

#950E30

rose-700

#FECDD3

#950E30

rose-700

#FECDD3

#950E30

rose-800

#FFE5E7

#650B24

rose-800

#FFE5E7

#650B24

rose-800

#FFE5E7

#650B24

rose-900

#FFF0F1

#500B20

rose-900

#FFF0F1

#500B20

rose-900

#FFF0F1

#500B20

Pink Colors

pink-50

#450D23

#FDF2F8

pink-50

#450D23

#FDF2F8

pink-50

#450D23

#FDF2F8

pink-100

#660F32

#FCE8F4

pink-100

#660F32

#FCE8F4

pink-100

#660F32

#FCE8F4

pink-200

#A3144F

#FBD0E8

pink-200

#A3144F

#FBD0E8

pink-200

#A3144F

#FBD0E8

pink-300

#C4216A

#F9A9D5

pink-300

#C4216A

#F9A9D5

pink-300

#C4216A

#F9A9D5

pink-400

#EC4699

#F471B5

pink-400

#EC4699

#F471B5

pink-400

#EC4699

#F471B5

pink-500

#F471B5

#EC4B9C

pink-500

#F471B5

#EC4B9C

pink-500

#F471B5

#EC4B9C

pink-600

#F9A9D5

#DA2576

pink-600

#F9A9D5

#DA2576

pink-600

#F9A9D5

#DA2576

pink-700

#FBD0E8

#9F144D

pink-700

#FBD0E8

#9F144D

pink-700

#FBD0E8

#9F144D

pink-800

#FCE8F4

#660F32

pink-800

#FCE8F4

#660F32

pink-800

#FCE8F4

#660F32

pink-900

#FDF2F8

#520F2A

pink-900

#FDF2F8

#520F2A

pink-900

#FDF2F8

#520F2A

᛭᛭᛭

Top Framer components delivered to your inbox

Buy Professional Plan

©X UI KIT

Pricing

About

by BuninUX

Built in Framer

©X UI KIT

Pricing

About

by BuninUX

Built in Framer

©X UI KIT

Pricing

About

by BuninUX

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

Colors

X UI Kit uses a color palette that is identical to Tailwind CSS in color semantics but adds post-processing of the APCA color model and compatibility with WCAG accessibility requirements for both light and dark colors.

framer ui kit

neutral color palette

framer color palette

Background Colors

Text Colors

Alpha Light Colors

Alpha Dark Colors

Gray Colors

Bronze Colors

Metal Colors

Blue Gray Colors

Blue Colors

Sky Blue Colors

Indigo Colors

Purple Colors

Fuchsia Colors

Cyan Colors

Teal Colors

Green Colors

Emerald Colors

Lime Colors

Yellow Colors

Orange Colors

Red Colors

Rose Colors

Pink Colors

Top Framer components delivered to your inbox

Accordion

Avatar

Badge

Breadcrumbs

Button

Checkbox

Input

Menu List

Navigation

Footer

Radio

Rating

Tabs

Toast

Toggle

Tooltip

Typography

Accordion

Avatar

Badge

Breadcrumbs

Button

Checkbox

Input

Menu List

Navigation

Footer

Radio

Rating

Tabs

Toast

Toggle

Tooltip

Typography

Accordion

Avatar

Badge

Breadcrumbs

Button

Checkbox

Input