UIXColors Документация

UIXColors — это полноценный набор браузерных дизайн-инструментов, созданных для помощи дизайнерам и разработчикам в создании доступных и красивых пользовательских интерфейсов. Наши инструменты обрабатывают данные полностью на стороне клиента, где это возможно — аккаунт не требуется, данные не сохраняются.

Платформа охватывает полный дизайн-процесс: извлечение дизайн-токенов с реальных сайтов, конвертацию цветов между форматами, проверку соответствия WCAG, создание цветовых палитр из изображений, генерацию настраиваемых QR-кодов и скачивание ассетов с любых публичных страниц.

Основные инструменты

• Color Playground: Создавайте и предпросматривайте доступные цветовые палитры с проверкой контрастности WCAG в реальном времени и экспортом в CSS, Tailwind и Figma.
• Генератор стайл-гайдов: Извлекайте полные дизайн-системы (цвета, шрифты, логотипы, иконки, кнопки) с любого сайта через рендеринг в браузере Playwright.
• Конвертер цветов: Конвертируйте между HEX, RGB, HSL, HSV, CMYK, OKLCH и ближайшим Pantone — с копированием каждого формата в один клик.
• Проверка контрастности: Проверяйте соответствие WCAG AA/AAA для любой пары цветов «текст–фон» с живым превью.
• Извлечение палитры: Загрузите изображение и получите до 10 доминирующих цветов через кластеризацию K-Means — полностью в браузере, без загрузки на серверы.
• Генератор QR-кодов: Создавайте настраиваемые QR-коды с поддержкой логотипа, цветовых градиентов, стилей точек и экспортом в SVG/PNG.
• Загрузчик изображений: Извлекайте и скачивайте все изображения с любого публичного сайта с поддержкой ZIP-архива для массовой загрузки.
• Конструктор градиентов: Проектируйте CSS-градиенты (линейные и радиальные) с неограниченным числом стопов и живым предпросмотром кода.

Использование извлечённых цветов как CSS Custom Properties

Извлечение палитры и Генератор стайл-гайдов экспортируют цвета как CSS custom properties. Вставьте их в файл globals.css:

:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #f59e0b;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
}

Интеграция с Tailwind CSS v4

В Tailwind CSS v4 Вы можете ссылаться на CSS-переменные напрямую в конфигурации темы. Добавьте извлечённые цвета в tailwind.config.ts:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        accent: "var(--color-accent)",
      },
    },
  },
}

Формат OKLCH для дизайн-систем

Для современных дизайн-систем используйте OKLCH-значения из Конвертера цветов. OKLCH обеспечивает перцептивно равномерную светлоту, что упрощает создание доступных цветовых шкал:

:root {
  /* OKLCH: oklch(lightness chroma hue) */
  --primary-50: oklch(97% 0.02 260);
  --primary-500: oklch(60% 0.15 260);
  --primary-900: oklch(25% 0.08 260);

  /* Используется с Tailwind v4 */
  --color-primary: oklch(60% 0.15 260);
}

Формат экспорта JSON-токенов

JSON-экспорт из Извлечения палитры следует стандартному формату дизайн-токенов, совместимому со Style Dictionary, Theo и Figma Design Tokens:

[
  {
    "hex": "#3b82f6",
    "rgb": { "r": 59, "g": 130, "b": 246 },
    "coverage": "42%"
  },
  {
    "hex": "#1e3a5f",
    "rgb": { "r": 30, "g": 58, "b": 95 },
    "coverage": "28%"
  }
]

Пример интеграции с React / Next.js

Для проектов на React и Next.js импортируйте CSS-переменные в корневой layout и используйте их через Tailwind или inline-стили:

// app/layout.tsx
import "@/styles/design-tokens.css" // экспортированные CSS-переменные

// Использование в компоненте
export function Button({ children }) {
  return (
    <button
      style={{ backgroundColor: "var(--color-primary)" }}
      className="text-white px-4 py-2 rounded"
    >
      {children}
    </button>
  )
}

Сводка форматов экспорта