Генератор случайных цветов

Раскрытие информации: Я получаю комиссионные за покупки, совершенные по ссылкам на этой странице. Это помогает поддерживать этот сайт.

Перед вами полезный генератор случайных цветов. Он генерирует и отображает цвета вместе с шестнадцатеричными кодами для использования в любой графической программе. Также показан код CSS, чтобы вы могли использовать эти цвета на сайте.

Даны две версии каждого цвета: одна с белым текстом, другая с черным.

bleakly #8DC139


.color-bleakly, .color-hover-bleakly:hover {color:#FFF!important; background-color:#8DC139!important}

bleakly #8DC139


.color-bleakly, .color-hover-bleakly:hover {color:#000!important; background-color:#8DC139!important}

graciously #AEA9C9


.color-graciously, .color-hover-graciously:hover {color:#FFF!important; background-color:#AEA9C9!important}

graciously #AEA9C9


.color-graciously, .color-hover-graciously:hover {color:#000!important; background-color:#AEA9C9!important}

briefly #61BEA9


.color-briefly, .color-hover-briefly:hover {color:#FFF!important; background-color:#61BEA9!important}

briefly #61BEA9


.color-briefly, .color-hover-briefly:hover {color:#000!important; background-color:#61BEA9!important}

hastily #E2485C


.color-hastily, .color-hover-hastily:hover {color:#FFF!important; background-color:#E2485C!important}

hastily #E2485C


.color-hastily, .color-hover-hastily:hover {color:#000!important; background-color:#E2485C!important}


 

Доступ ко всему в Интернете с NordVPN


 

Случайные цвета для любых целей

Если вы ищете вдохновение для разработки графики или создаете веб-сайт, наш генератор случайных цветов - отличный выбор. Для каждого созданного цвета приведены его шестнадцатеричные коды.

Мы также показываем, как эти цвета будут выглядеть с белым текстом и с черным текстом, чтобы помочь вам получить представление о том, как вы хотите их использовать.

Если вам не нравится ни один из сгенерированных цветов, просто нажмите "Generate New". Однако имейте в виду - вы не сможете вернуть старые цвета, поэтому, если вам что-то понравилось, скопируйте и сохраните шестнадцатеричные коды перед нажатием кнопки.

Здесь есть что-то для каждого. С почти бесконечным количеством цветов, которые могут быть сгенерированы, у вас есть множество вариантов для выбора.

Как мы генерируем цвета

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

Названия цветов

Приведенные здесь названия цветов - это просто временные названия, которые мы используем в качестве условных обозначений. Если вам понадобится использовать эти цвета, то для удобства вам, вероятно, следует переименовать их в любые другие. Мы хотели убедиться, что названия, которые мы дали, не конфликтуют с другими существующими названиями цветов, которые вы можете использовать в своем проекте (например, светло-зеленый).

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

Для веб-дизайнеров

CSS

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

Все наши имена-заполнители заканчиваются буквами "ly", чтобы немного облегчить поиск в таблице стилей тех, которые вы забыли изменить.

HTML

После копирования кода CSS в таблицу стилей вы можете использовать любой из этих цветов в HTML следующим образом:

<div class="angrily">
<h3>Heading</h3>
<p>Paragraph content</p>
</div>

В приведенном выше примере видно, что было бы лучше изменить название на значимый цвет.

Темный фон будет автоматически сопровождаться белым текстом, поэтому вам не нужно будет отдельно указывать цвет фона и цвет текста.

Эта страница была в последний раз обновлена 19 октября 2022 г.