AI Code Autopilot UX Toolkit

Refactor Lime
#c8e87c
IDE Background
#2d2d2d
Autocomplete Blue
#3a86ff
Linter Red
#ff595e
Smart Suggest Grey
#e5e5e5
Syntax Light
#f8f8f2

Палітра містить світлий, темний кольори. Акцентні кольори Autocomplete Blue #3a86ff та Linter Red #ff595e. Палітра має температуру кольорів Теплий, Нейтральний, Холодний.

За світлістю палітра сягає від #2D2D2D (найтемніший) до #F8F8F2 (найсвітліший). Діапазон світлості широкий.

Насиченість змішана — є приглушені й більш яскраві акценти.

Деякі пари відтінків близькі до комплементарних позицій — можливе читання як комплементарний контраст (евристика).

Загалом температура зміщена в бік теплого.

HEX-коди (відсортовано): #2D2D2D, #3A86FF, #C8E87C, #E5E5E5, #F8F8F2, #FF595E

Палітра AI Code Autopilot UX Toolkit містить комбінацію з 6 кодів кольорів :

HEX: #c8e87c, RGB: (200, 232, 124); HEX: #2d2d2d, RGB: (45, 45, 45); HEX: #3a86ff, RGB: (58, 134, 255)

HEX: #ff595e, RGB: (255, 89, 94); HEX: #e5e5e5, RGB: (229, 229, 229); HEX: #f8f8f2, RGB: (248, 248, 242)

Спрощений варіант палітри кольорів

Відтінок Жовтозелений, Відтінок Чорний, Відтінок dodgerblue, Відтінок salmon, Відтінок gainsboro, Відтінок floralwhite

Кольорова схема створена автором colorstudio

Більше палітр з:

Коди кольорів у палітрі

AI Code Autopilot UX Toolkit коди кольорів HEX, RGB інформація у таблиці

Колір	HEX	RGB	Назва	Альтернативна назва
#c8e87c	#c8e87c	RGB(200, 232, 124)	Refactor Lime	—
#2d2d2d	#2d2d2d	RGB(45, 45, 45)	IDE Background	—
#3a86ff	#3a86ff	RGB(58, 134, 255)	Autocomplete Blue	—
#ff595e	#ff595e	RGB(255, 89, 94)	Linter Red	—
#e5e5e5	#e5e5e5	RGB(229, 229, 229)	Smart Suggest Grey	Gray90
#f8f8f2	#f8f8f2	RGB(248, 248, 242)	Syntax Light	Pure White

Контраст палітри кольорів

4 пари кольорів мають низький контраст і потребують покращення, що може вплинути на зручність читання.

Колір тексту	Колір фону	Коефіцієнт контрастності
#c8e87c	#e5e5e5	1.09
#c8e87c	#f8f8f2	1.28
#3a86ff	#ff595e	1.13
#e5e5e5	#f8f8f2	1.18

Зображення палітри AI Code Autopilot UX Toolkit png

--color-refactor-lime:	#c8e87c;
--color-ide-background:	#2d2d2d;
--color-autocomplete-blue:	#3a86ff;
--color-linter-red:	#ff595e;
--color-smart-suggest-grey:	#e5e5e5;
--color-syntax-light:	#f8f8f2;

$color-refactor-lime:	#c8e87c;
$color-ide-background:	#2d2d2d;
$color-autocomplete-blue:	#3a86ff;
$color-linter-red:	#ff595e;
$color-smart-suggest-grey:	#e5e5e5;
$color-syntax-light:	#f8f8f2;

@color-refactor-lime:	#c8e87c;
@color-ide-background:	#2d2d2d;
@color-autocomplete-blue:	#3a86ff;
@color-linter-red:	#ff595e;
@color-smart-suggest-grey:	#e5e5e5;
@color-syntax-light:	#f8f8f2;