Colors

Color palette for your project.

Tailwind CSS

To align with the Bitrix24 style, you should use only the colors from this palette. Other colors are not recommended.

Palette

Gray

100

#edeef0

50

#eef2f4

40

#f1f4f6

30

#f5f7f8

20

#f8fafb

white

#ffffff

150

#e6e8e9

190

#e2e3e5

200

#dfe0e3

250

#dde2e5

300

#d5d7db

320

#cfd4d8

330

#c6cdd3

340

#ccd3dd

350

#c9ccd0

default

400

#bdc1c6

500

#a8adb4

550

#9fa4ab

600

#9499a4

650

#868d95

700

#838c95

750

#80868e

760

#828b95

800

#6a737f

850

#5b6573

900

#525c69

950

#333333

black

#333333

dark

#0f0f0f

ebony

#000000

Slate

100

#dce3ef

50

#f0f6ff

150

#d2dae7

200

#c8d1df

250

#c2d1f0

300

#b7c2d2

400

#a3afc2

default

500

#93a0b4

600

#6e7d96

700

#5d6e89

800

#4c5f7b

850

#3b506e

900

#2f4265

950

#162455

Red

100

#fff8f8

150

#fff0f0

200

#ffe8e8

250

#ffdcdb

270

#fdd5d3

300

#ffcdcc

350

#f2b6b3

400

#ff9a97

450

#ff7c78

default

500

#ff5752

600

#f4433e

650

#fb6dba

700

#e92f2a

720

#f0371b

730

#d24430

750

#d7413c

760

#c43d51

790

#cc1c00

800

#c21b16

850

#a21429

900

#9a0703

930

#851021

950

#800602

Orange

100

#fffaf0

30

#fdfae1

150

#fff5e3

200

#fff1d6

230

#fef3b8

250

#ffe9be

300

#ffe1a6

350

#f1e295

370

#dfc684

400

#ffc34d

default

500

#ffa900

530

#fba467

550

#eba51c

600

#e89b06

700

#c48300

750

#a07f27

760

#ae914b

800

#9f6a00

900

#7a5100

950

#614000

Green

100

#fafded

150

#f5fcde

200

#f1fbd0

250

#faf6c3

270

#eaf5c5

280

#e5f1bf

300

#e2f1b3

330

#d3e59a

350

#cfe780

360

#dbf087

370

#d2f95f

400

#bbde4d

430

#b2e232

450

#bbed21

default

500

#9dcf00

550

#95c500

570

#a2bf54

600

#8dbb00

700

#7fa800

730

#86a732

780

#668d13

800

#688800

900

#506900

950

#3d4f00

Collab

100

#f2fee2

50

#f8fff0

150

#eeffda

200

#e9ffcf

250

#dbfcbe

300

#d4fdb0

380

#87eda0

400

#8cef73

default

500

#6be860

600

#19cc45

650

#29ad49

700

#00a94e

800

#1e8d36

900

#065217

950

#052e16

Blue

100

#f4fcfe

150

#ecfafe

200

#e5f9ff

250

#d3f4ff

270

#d6f1fb

300

#c3f0ff

310

#c5f1ff

320

#bcedfc

400

#7fdefc

450

#3eddff

default

500

#2fc6f6

530

#3bc8f5

550

#12b1e3

570

#00baf2

575

#00ace3

600

#11a9d9

620

#0aa0d0

630

#37aed4

650

#399fc2

660

#559be6

700

#008dba

750

#328ba9

800

#00789e

850

#2066b0

900

#006484

950

#004f69

Cyan

100

#dbf3fa

50

#e9f9fc

150

#d1eef9

160

#c5e7f4

200

#c3e6f4

230

#aee0f2

250

#ace5ec

300

#89d9eb

310

#80dce8

320

#6ed7e5

350

#55d0e0

400

#22b9b7

default

500

#05b5ab

600

#009ea3

700

#008394

800

#006880

850

#004f69

900

#004157

950

#003242

Ai

100

#e3ddf7

50

#f0edfc

10

#f6f2fe

150

#e7d8fa

200

#d1c5ef

250

#cdbfe8

300

#c0ade6

330

#b095dc

350

#a77bde

370

#a977fa

400

#a36ff1

450

#935bec

default

500

#8e52ec

550

#8447e4

600

#8044df

700

#7437d3

800

#682ac6

900

#6026b8

950

#501e9f

Base

base-20

#f8fafb

base-30

#f5f7f8

base-40

#f1f4f6

base-50

#eef2f4

base-100

#edeef0

base-150

#e6e8e9

base-190

#e2e3e5

base-200

#dfe0e3

base-250

#dde2e5

base-300

#d5d7db

base-320

#cfd4d8

base-330

#c6cdd3

base-340

#ccd3dd

base-350

#c9ccd0

base-400

#bdc1c6

base-500

#a8adb4

base-550

#9fa4ab

base-600

#9499a4

base-650

#868d95

base-700

#838c95

base-750

#80868e

base-760

#828b95

base-800

#6a737f

base-850

#5b6573

base-900

#525c69

base-950

#333333

base-master

#333333

base-dark

#0f0f0f

base-ebony

#000000

Primary

primary-on

#ffffff

primary-text

#333333

primary-background

#ffffff

primary-background-on

#333333

primary-link

#2066b0

Secondary

secondary-on

#ffffff

secondary-text

#525c69

secondary-background

#edeef0

secondary-background-on

#6a737f

secondary-link

#004f69

Alert

alert-on

#ffffff

default

alert-text

#ff5752

alert-background

#ffe8e8

alert-background-on

#e92f2a

alert-link

#9a0703

Success

success-on

#ffffff

default

success-text

#9dcf00

success-background

#f1fbd0

success-background-on

#7fa800

success-link

#506900

Warning

warning-on

#ffffff

default

warning-text

#ffa900

warning-background

#fff1d6

warning-background-on

#c48300

warning-link

#7a5100

Info

info-on

#ffffff

default

info-text

#2fc6f6

info-background

#e5f9ff

info-background-on

#008dba

info-link

#006484

Tag

tag-1

#bcedfc

tag-2

#00baf2

tag-3

#dbf087

tag-4

#87eda0

tag-5

#c2d1f0

tag-6

#ace5ec

tag-7

#dfc684

tag-8

#ccd3dd

tag-9

#e2e3e5

Accent

accent-light-blue

#559be6

accent-aqua

#55d0e0

accent-pink

#fb6dba

accent-brown

#ae914b

accent-green

#29ad49

accent-turquoise

#05b5ab

accent-purple

#a77bde

accent-lavender

#8e52ec

accent-yellow

#fef3b8

Copilot

copilot-primary

#8e52ec

copilot-secondary

#b095dc

copilot-dark

#682ac6

Symlink

note

#fdfae1

subtle

#838c95

extranet

#e89b06

tertiary

#eef2f4