Цветовые коды HTML: от красного к желтому и зеленому - PullRequest
Новая
       55

Цветовые коды HTML: от красного к желтому и зеленому

38 голосов
/ 12 ноября 2010

Я хотел бы придумать столько значений HEX HTML, чтобы иметь плавный градиент цвета от красного к зеленому:

Мне бы хотелось, чтобы это было похоже на следующее: http://www.utexas.edu/learn/html/colors.html

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

На этом сайте «1 из 6» больше всего похоже на то, что я ищу, но этот пример ограничен 11 цветами: 

(1) FF0000 Red, 
(2) FF3300 Red(Orange)
(3) ff6600 
(4) ff9900 
(5) FFCC00 Gold 
(6) FFFF00 Yellow
(7) ccff00
(8) 99ff00
(9) 66ff00
(10) 33ff00
(11) 00FF00 Lime

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

Спасибо за любые идеи и помощь.

Ответы [ 13 ]

0 голосов
/ 20 августа 2014

Вот простой, но грязный способ создания этих цветов: 

COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]

Кодировка цвета для карт Google: aabbggrr.

Это даст вам список из 103цвета.Я удалил три, а затем проиндексировал список, используя процент в качестве целого числа.

0 голосов
/ 25 сентября 2012

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

Подробности можно прочитать здесь:

http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/

0 голосов
/ 12 ноября 2010

Работает только в Chrome & Safari

С NiceWebType.com : 

<style type="text/css">
    h1 {
        position: relative;
        font-size: 60px;
        line-height: 60px;
        text-shadow: 0px 0px 3px #000;
    }
    h1 a {
        position: absolute;
        top: 0; z-index: 2;
        color: #F00;
        -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    h1:after {
        content: "CSS Text Gradient (Webkit)";
        color: #0F0;
    }
</style>

<h1><a>CSS Text Gradient (Webkit)</a></h1>
Страница:
...