Clean Code Design Tokens

Syntax White
#fafafa
Keyword Blue
#3a86ff
Comment Gray
#6c757d
Constant Pink
#ffb3c1
Function Mint
#b5ead7
Line Highlight
#f4f4f4

Палитра содержит светлый цвета. Акцентные цвета Keyword Blue #3a86ff да Constant Pink #ffb3c1. Палитра имеет цветовую температуру Нейтральный, Холодный, Теплый.

По светлоте палитра тянется от #6C757D (самый тёмный) до #FAFAFA (самый светлый). Диапазон светлоты умеренный.

Насыщенность смешанная — есть приглушённые цвета и более яркие акценты.

Некоторые пары оттенков близки к комплементарным позициям — возможно чтение как комплементарный контраст (эвристика).

В целом температура смещена в сторону холодного.

HEX-коды (по возрастанию): #3A86FF, #6C757D, #B5EAD7, #F4F4F4, #FAFAFA, #FFB3C1

Палитра Clean Code Design Tokens содержит комбинацию из 6 кодов цветов:

HEX: #fafafa, RGB: (250, 250, 250); HEX: #3a86ff, RGB: (58, 134, 255); HEX: #6c757d, RGB: (108, 117, 125)

HEX: #ffb3c1, RGB: (255, 179, 193); HEX: #b5ead7, RGB: (181, 234, 215); HEX: #f4f4f4, RGB: (244, 244, 244)

Упрощенная версия цветов палитры

Тень whitesmoke, Тень dodgerblue, Оттенок slategrey, Оттенок lightpink, Оттенок paleturquoise, Оттенок whitesmoke

Цветовая схема создана автором colorscheme

Больше палитр с:

Коды цветов в палитре

Clean Code Design Tokens коды цветов HEX, RGB информация в таблице

Цвет	HEX	RGB	Название	Альтернативное название
#fafafa	#fafafa	RGB(250, 250, 250)	Syntax White	Dr. White
#3a86ff	#3a86ff	RGB(58, 134, 255)	Keyword Blue	—
#6c757d	#6c757d	RGB(108, 117, 125)	Comment Gray	Pompeii Ash
#ffb3c1	#ffb3c1	RGB(255, 179, 193)	Constant Pink	—
#b5ead7	#b5ead7	RGB(181, 234, 215)	Function Mint	—
#f4f4f4	#f4f4f4	RGB(244, 244, 244)	Line Highlight	—

Контраст палитры цветов

7 цветовых пары имеют низкий контраст и требуют улучшения, что может повлиять на читаемость.

Цвет текста	Цвет фона	Коэффициент контрастности
#fafafa	#ffb3c1	1.61
#fafafa	#b5ead7	1.28
#fafafa	#f4f4f4	1.05
#3a86ff	#6c757d	1.34
#ffb3c1	#b5ead7	1.26
#ffb3c1	#f4f4f4	1.53

Изображение палитры Clean Code Design Tokens png

--color-syntax-white:	#fafafa;
--color-keyword-blue:	#3a86ff;
--color-comment-gray:	#6c757d;
--color-constant-pink:	#ffb3c1;
--color-function-mint:	#b5ead7;
--color-line-highlight:	#f4f4f4;

$color-syntax-white:	#fafafa;
$color-keyword-blue:	#3a86ff;
$color-comment-gray:	#6c757d;
$color-constant-pink:	#ffb3c1;
$color-function-mint:	#b5ead7;
$color-line-highlight:	#f4f4f4;

@color-syntax-white:	#fafafa;
@color-keyword-blue:	#3a86ff;
@color-comment-gray:	#6c757d;
@color-constant-pink:	#ffb3c1;
@color-function-mint:	#b5ead7;
@color-line-highlight:	#f4f4f4;