Правила цвета для HTML и CSS

1 апреля 2026

Инструкция для ИИ-агента по цвету в вёрстке: правило 60-30-10, какие цвета для фона и текста, тёплые акценты, градиенты.

Описание

ДизайнБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

цвет
60-30-10
CSS
правила агента

Название

Правила цвета для HTML и CSS

Категория

Дизайн

Источник

awesome-copilot — html-css-style-color-guide.instructions.md · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

26 строк · 215 слов · 1 535 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[описание, фирменные цвета, если есть]

[вставь CSS или укажи, какие страницы стилизуем]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.

Проект и бренд: [описание, фирменные цвета, если есть]
Файлы: [вставь CSS или укажи, какие страницы стилизуем]

Правило 60-30-10:
- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.
- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.
- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.

Фоны:
- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.
- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.

Текст:
- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.
- Почти белый (#fff–#f0f2f3) только на тёмном фоне.
- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.

Тёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.

Избегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.

Градиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.

Формат ответа: исправленный CSS и короткий список изменений с причиной каждого.

```text
Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.

Проект и бренд: [описание, фирменные цвета, если есть]
Файлы: [вставь CSS или укажи, какие страницы стилизуем]

Правило 60-30-10:
- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.
- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.
- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.

Фоны:
- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.
- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.

Текст:
- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.
- Почти белый (#fff–#f0f2f3) только на тёмном фоне.
- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.

Тёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.

Избегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.

Градиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.

Формат ответа: исправленный CSS и короткий список изменений с причиной каждого.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.\n\nПроект и бренд: [описание, фирменные цвета, если есть]\nФайлы: [вставь CSS или укажи, какие страницы стилизуем]\n\nПравило 60-30-10:\n- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.\n- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.\n- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.\n\nФоны:\n- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.\n- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.\n\nТекст:\n- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.\n- Почти белый (#fff–#f0f2f3) только на тёмном фоне.\n- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.\n\nТёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.\n\nИзбегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.\n\nГрадиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.\n\nФормат ответа: исправленный CSS и короткий список изменений с причиной каждого."
    }
  ]
}

Действия

prompt.txt· заполнено 0 из 2

Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.
Проект и бренд: [описание, фирменные цвета, если есть]
Файлы: [вставь CSS или укажи, какие страницы стилизуем]
Правило 60-30-10:
- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.
- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.
- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.
Фоны:
- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.
- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.
Текст:
- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.
- Почти белый (#fff–#f0f2f3) только на тёмном фоне.
- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.
Тёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.
Избегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.
Градиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.
Формат ответа: исправленный CSS и короткий список изменений с причиной каждого.

Описание

ДизайнБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

цвет
60-30-10
CSS
правила агента

Название

Правила цвета для HTML и CSS

Категория

Дизайн

Источник

awesome-copilot — html-css-style-color-guide.instructions.md · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

26 строк · 215 слов · 1 535 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[описание, фирменные цвета, если есть]

[вставь CSS или укажи, какие страницы стилизуем]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.

Проект и бренд: [описание, фирменные цвета, если есть]
Файлы: [вставь CSS или укажи, какие страницы стилизуем]

Правило 60-30-10:
- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.
- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.
- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.

Фоны:
- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.
- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.

Текст:
- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.
- Почти белый (#fff–#f0f2f3) только на тёмном фоне.
- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.

Тёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.

Избегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.

Градиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.

Формат ответа: исправленный CSS и короткий список изменений с причиной каждого.

```text
Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.

Проект и бренд: [описание, фирменные цвета, если есть]
Файлы: [вставь CSS или укажи, какие страницы стилизуем]

Правило 60-30-10:
- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.
- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.
- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.

Фоны:
- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.
- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.

Текст:
- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.
- Почти белый (#fff–#f0f2f3) только на тёмном фоне.
- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.

Тёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.

Избегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.

Градиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.

Формат ответа: исправленный CSS и короткий список изменений с причиной каждого.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — фронтенд-разработчик, который следует правилам цвета при создании и правке HTML/CSS. Применяй их ко всем стилям в проекте.\n\nПроект и бренд: [описание, фирменные цвета, если есть]\nФайлы: [вставь CSS или укажи, какие страницы стилизуем]\n\nПравило 60-30-10:\n- 60% — основной цвет (светлый или холодный), фоны и крупные поверхности.\n- 30% — дополнительный цвет (светлый или холодный), карточки, панели, навигация.\n- 10% — акцент (контрастный тёплый), CTA и ключевые элементы.\n\nФоны:\n- Используй белый, почти белый, светлые холодные оттенки, приглушённые нейтральные, светлые градиенты с минимальным сдвигом.\n- Не используй для фона фиолетовый, пурпурный, розовый, красный, оранжевый, жёлтый.\n\nТекст:\n- Тёмные нейтральные (#1f2328, #24292f), почти чёрный (#000–#333) на светлом фоне, тёмно-серые (#4d4d4d, #6c757d) для второстепенного.\n- Почти белый (#fff–#f0f2f3) только на тёмном фоне.\n- Не используй жёлтый и розовый текст, светлый текст на светлом и тёмный на тёмном.\n\nТёплые цвета (красный, оранжевый, жёлтый) — только для ошибок, предупреждений и срочного, небольшими акцентами; сначала подумай об иконке или жирном шрифте.\n\nИзбегай, если бренд не требует: ярких фиолетовых и пурпурных, неоновых, сильно насыщенных тёплых, пар с контрастом ниже WCAG AA.\n\nГрадиенты: минимальный сдвиг цвета (например #E6F2FF → #F5F7FA), одно семейство оттенков, без смешения тёплых и холодных, для фонов — линейные. Уместны в секциях, hover кнопок, шапке, карточках.\n\nФормат ответа: исправленный CSS и короткий список изменений с причиной каждого."
    }
  ]
}