← На главную

Splash: 1000 оттенков по трём цифрам уже в CSS

03.06.2026 21:22 · hackernews

Splash — это цветовой формат. Каждый цвет в нём — трёхзначное число. Первая цифра отвечает за красный канал, вторая за зелёный, третья за синий. 900 — это полный красный и ничего в остальных, 000 — чёрный, 999 — белый, 555 — серый, 079 — светло-голубой. Всего ровно 1000 цветов.

Формат придумали, чтобы избавиться от паралича выбора. Это эмоциональный инструмент: он не даёт зацикливаться на поиске «идеального» оттенка. Популярные цвета легко запомнить: 090 зелёный, 099 циан, 009 синий, 409 фиолетовый, 909 розовый, 900 красный, 940 оранжевый, 990 жёлтый. Но у вас остаётся пространство для экспериментов — можно собрать свою тему вроде 093 зелёный, 289 циан, 059 синий и так далее.

Автор разработал Splash для своего проекта Cellpond — это часть стратегии, благодаря которой всё работает быстро. Cellpond использует дискретные значения от 0 до 9, пользователю не нужно возиться с большими числами. Реализация простая — никаких библиотек или фреймворков. Функция для конвертации в hex занимает несколько строк: разбивает число на каналы, переводит каждый из диапазона 0–9 в 0–255 и собирает hex-строку.

В Cellpond автор пошёл дальше — вручную подобрал hex-значения для каждого канала через lookup-таблицу. Так цвета получились более пастельными и лучше подошли теме приложения. 000 там не чисто чёрный, а чуть светлее, чтобы был виден на фоне. Можно вообще обойтись без вычислений и использовать прямую таблицу соответствия SPLASH_TO_HEX — 1000 строк, но это всё равно немного.

Сообщество уже подхватило идею. Matan сделал SCSS-функцию и статический CSS-файл со всеми цветами. Roman Komarov реализовал поддержку через CSS-миксины. Автор рад, что формат легко лёг на CSS именно из-за того, что это просто трёхзначное число — никаких букв.

Читать оригинал →