#CCFF00 (сокращенно: #CF0) - безопасный цвет. Значения цвета в десятичном коде: 13 434 624; в двоичном (бинарном): 11001100 11111111 00000000.

Яркость цветовых каналов RGB.

Красный:204 Зеленый:255 Синий:0

Координаты #CCFF00 в цветовых пространствах:

Имя: нет
Сокращенно: #CF0
HSV: 72, 100%, 100%
HSL: 72°, 100%, 50%
RGB: 204, 255, 0
RGB%: 80%, 100%, 0%
CMYK: 20%, 0%, 100%, 0%
CMY: 20%, 0%, 100%
HunterLab: 91.84627, -42.83681, 55.84531
CIELab:	93.6055, -41.94815, 90.27764
CIEXYZ: 60.66184, 84.35737, 13.08539
CIEYxy: 84.35737, 0.38368, 0.53355
CIELUV: 93.6055, -24.47428, 106.7837
CIELCH: 93.6055, 99.54748, 114.92227

С помощью калькулятора-конвертера можно ознакомиться с параметрами других цветов и перевести одни значения в другие.

Цветовые схемы для цвета #CCFF00.

При создании схем использовалась цветовая модель HSL, параметры цвета #CCFF00: H = 72°; S = 100%; L = 50%. Данные решения получены в результате уменьшения/увеличения тона (Hue) цветового круга в триадной, расщепленных дополняющих цветах, прямоугольной, квадратной, аналоговой и параметров светлоты (Lightness) в монохроматической, значения насыщенности (Saturation) остаются неизменны. Переход цвета #CCFF00 к более светлым и темным тонам сгенерирован шагом в 10% от каждого параметра R, G, B (204 255 0). Расположенные ниже цветовые схемы не являются обязательными, однако могут помочь в решении многих дизайнерских задач.

Триадная.

Цвета расположены по принципу равнобедренного треугольника: Hue = 0° + 120° и + 240°, выглядят равноценно, нет преобладания.

Расщепленные дополняющие цвета.

Противоположные от цвета #CF0, находятся ближе друг к другу, выделяется основной.

Квадратная.

Четырехцветная схема основанная на квадрате с перемещением тона на 1/4 круга (0°, 0°+90°, 0°+180, 0°+270°).

Прямоугольная.

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

Аналоговая.

Схема построена из соседних тонов цветового круга плотно связанных между собой.

Монохроматическая.

Данная композиция создана увеличением/уменьшением параметра светлоты (Lightness).

Затемнение.

R, G, B.
180, 225, 0
160, 200, 0
140, 175, 0
120, 150, 0
100, 125, 0
80, 100, 0
60, 75, 0
40, 50, 0
20, 25, 0

Осветление.

R, G, B.
209, 255, 25
214, 255, 50
219, 255, 75
224, 255, 100
229, 255, 125
234, 255, 150
239, 255, 175
244, 255, 200
249, 255, 225

Цвет #CCFF00 в CSS, SVG.

Помимо указания цвета #CCFF00 в шестнадцатеричном коде (hex), для css, svg применимы альтернативные значения: сокращенное написание (#CF0); в RGB (R/red: 204 + G/green: 255 + B/blue: 0 = rgb(204, 255, 0)); RGB в процентах (R%/красный%: 80% + G%/зеленый%: 100% + B%/синий%: 0% = rgb(80%, 100%, 0%)); HSL (H/hue/тон: 72° + S/saturation/насыщенность: 100% + L/lightness/светлота: 50% = hsl(72, 100%, 50%)).

Примеры цвета #CCFF00 в CSS, SVG:

CSS.

Фон.

{background-color: #CCFF00}

Граница.

{border: 3px solid #CCFF00}

Цвет текста.

Текст цветом #CF0 на белом фоне.

{color: #CF0}

CSS + SVG.

Заливка.

{fill: #CCFF00}

Контур.

{stroke: #CCFF00; stroke-width: 3;}

Заливка текста.

Текст цветом #CF0 на черном фоне.

{fill: #CF0}

Градиенты.

Линейный и радиальный градиенты: переход от цвета #CF0 к белому и черному.

Линейный градиент CSS.

Переход цвета от #000 к #cf0.

{background: linear-gradient(to left, #CCFF00, #000);}

Линейный градиент SVG.

Переход цвета от #fff к #CF0.

<linearGradient id="Linear"> <stop offset="0%" stop-color="#fff"/> <stop offset="100%" stop-color="#CF0">"/> </linearGradient>

Радиальный градиент CSS.

{background: radial-gradient(rgb(0, 0, 0), rgb(204, 255, 0);}

Радиальный градиент SVG.

<radialGradient id="Radial"/> <stop offset="0%" stop-color="#CCFF00"/> <stop offset="100%" stop-color="#fff"/> </radialGradient/>

Фигуры и линии.

Примеры простых геометрических фигур и линий цветом #CCFF00, код иллюстрации представлен ниже.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 320">
<!-- В данном примере для заливки цветом #CCFF00 фигур и линий использованы атрибуты представления – стили встроенные непосредственно в документ SVG. -->
<!-- Прямоугольник --> <rect fill="#CCFF00" x="40" y="40" width="200" height="100" />
<!-- Квадрат --> <rect fill="rgb(204, 255, 0)" x="280" y="40" width="100" height="100" />
<!-- Круг --> <circle fill="hsl(72, 100%, 50%)" cx="470" cy="90" r="50" />
<!-- Овал --> <ellipse fill="rgb(80%, 100%, 0%)" cx="660" cy="90" rx="100" ry="50" />
<!-- Треугольник --> <polygon fill="hsla(72, 100%, 50%, 1)" points="240,280 40,280 140,180 " />
<!-- Линия --> <line stroke="rgba(204, 255, 0, 1)" stroke-width="10" x1="330" y1="280" x2="330" y2= "180 " />
<!-- Ломаная линия --> <polyline fill="none" stroke="#CCFF00ff" stroke-width="10" points="520,275 425,275 515,185 420,185 "/>
<!-- Стрелка --> <polygon fill="#CF0" points="560,245 660,245 660,255 760,235 660,215 660,225 560,225 "/>
</svg>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
/* Прямоугольник */ .square {width: 204px; height: 102px; background: #CCFF00;}
/* Квадрат */ .rectangle {width: 102px; height: 102px; background: #CCFF00;}
/* Круг */ .circle {width: 102px; height: 102px; border-radius: 50%; background: rgb(204, 255, 0);}
/* Овал */ .oval {width: 204px; height: 102px; border-radius: 50%; background: rgb(80%, 100%, 0%);}
/* Треугольник */ .triangle {border: solid transparent; border-width: 0 102px 102px; border-color: rgba(204, 255, 0, 1) transparent;}
/* Линия */ .line {width: 10px; height: 102px; margin-left: 71px; background: rgb(204, 255, 0);}
/* Ломаная линия */ .polyline {width: 96px; height: 82px; margin-left: 76px; border-top:10px solid #CF0; border-bottom:10px solid hsla(72, 100%, 50%, 1);}
.polyline:before {width: 10px; height: 126px; transform: rotate(45deg); position: absolute; top: -22px; right: 43px; background: hsl(72, 100%, 50%);}
/* Стрелка */ .arrow {width: 120px; height: 20px; background: #CF0;}
.arrow:before {position: absolute; border: 40px solid transparent; top: -10px; right: -80px;border-left-color: #CF0; border-width: 20px 0 20px 80px;}
div {position: relative; display: inline-block; vertical-align: middle; margin: 25px;}
div:before, div:after {content: ""; display: block;}
body {max-width: 824px;}
</style>
</head>
<body>
<div class="square"></div> <div class="rectangle"></div> <div class="circle"></div> <div class="oval"></div> <div class="triangle"></div> <div class="line"></div> <div class="polyline"></div> <div class="arrow"></div>
</body>
</html>

Прозрачность

Прозрачность для цвета #CCFF00 можно задать при помощи свойств opacity для CSS и fill-opacity или stroke-opacity в SVG, значениями от 0 до 1, где ноль – полная прозрачность, а единица – отсутствие таковой, или же непосредственно представлением значениями: HSLA (HSL + A (альфа-канал определяющий прозрачность)) = hsla(72, 100%, 50%, 1); RGBA (RGB + A) = rgba(204, 255, 0, 1); #RRGGBBAA (hex с прозрачностью): HEX + A - ff) = #CCFF00ff. На иллюстрациях ниже представлен цвет #CCFF00 с прозрачностью 80, 60, 40, 20 процентов на белом и черном фоне.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 175" >
<!-- Код документа для цвета #CCFF00 с использованием внутренних стилей CSS. -->
<style type="text/css">
.str2 {stroke:#666;stroke-width:6}
.f1 {fill:#CCFF00} /* Цвет #CCFF00 без прозрачности */
.f2 {fill:hsla(72, 100%, 50%, 0.8)} /* HSLA, прозрачность: 0.8 */
.f3 {fill:rgba(204, 255, 0, 0.6)} /* RGBA: 0.6 */
.f4 {fill:#CCFF00;fill-opacity:0.4} /* Через свойство "opacity": 0.4 */
.f5 {fill:#CCFF0033} /* #RRGGBBAA: 0.2 */
</style>
<circle class="f1 str2" cx="100" cy="100" r="50"/>
<circle class="f2 str2" cx="250" cy="100" r="50"/>
<circle class="f3 str2" cx="400" cy="100" r="50"/>
<circle class="f4 str2" cx="550" cy="100" r="50"/>
<circle class="f5 str2" cx="700" cy="100" r="50"/>
</svg>

Цветовые модели

Безопасные цвета

Предыдущий:
#CCCCFF
Следующий:
#CCFF33