#FF00FF (сокращенно: #f0f) - именованный веб-безопасный цвет: название на русском "малиновый, маджента, фуксия", на английском "magenta" или "fuchsia". Значения цвета в двоичном (бинарном) коде: 1111 1111 0000 0000 1111 1111; в десятичном: 16 711 935.

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

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

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

Имя: magenta или fuchsia
HSV: 300, 100%, 100%
HSL: 300, 100%, 50%
RGB: 255, 0, 255
RGB%: 100%, 0%, 100%
CMYK: 0%, 100%, 0%, 0%
#RRGGBBAA: #ff00ffff
CMY: 0%, 100%, 0%
HunterLab: 53.36666, 104.92066, -70.38748
CIELab:	60.31993, 98.25422, -60.84298
CIEXYZ: 59.29, 28.48, 96.98
CIEYxy: 28.48, 0.32092, 0.15415
CIELUV: 60.31993, 84.07486, -108.71158
CIELCH: 60.31993, 115.56712, 328.23253

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

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

Триадная.

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

#FFFF00
#00FFFF

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

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

#99FF00
#00FF99

Квадратная.

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

#FF0066
#00FF00
#00FF99

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

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

#FF8000
#00FF00
#007FFF

Аналоговая.

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

#7F00FF
#B300FF
#E500FF
#FF00E6
#FF00B2
#FF0080

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

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

#FF00FF
#2A002A
#550055
#800080
#AA00AA
#D400D4

Затемнение.

225, 0, 225
200, 0, 200
175, 0, 175
150, 0, 150
125, 0, 125
100, 0, 100
75, 0, 75
50, 0, 50
25, 0, 25

Осветление.

255, 25, 255
255, 50, 255
255, 75, 255
255, 100, 255
255, 125, 255
255, 150, 255
255, 175, 255
255, 200, 255
255, 225, 255

Переход цвета magenta к более светлым и темным тонам сгенерирован шагом в 10% от каждого параметра R, G, B.

Цвет magenta в CSS, SVG.

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

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

CSS.

Фон.

{background-color: magenta}

Граница.

{border: 3px solid #ff00ff}

Цвет текста.

Малиновый, маджента, фуксия текст на белом фоне.

{color: #ff00ff}

CSS + SVG.

Заливка.

{fill: magenta}

Контур.

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

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

Малиновый, маджента, фуксия текст на черном фоне.

{fill: #ff00ff}

Градиенты.

Линейный и радиальный градиенты: переход от цвета fuchsia к white и black.

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

Переход цветов: малиновый, маджента, фуксия – черный.

{background: linear-gradient(to left, fuchsia, black);}

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

Переход цветов: белый – малиновый, маджента, фуксия.

<linearGradient id="Linear"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="magenta">"/> </linearGradient>

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

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

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

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 320">
<!-- В данном примере для цвета #ff00ff использованы атрибуты представления – стили встроенные непосредственно в документ SVG. -->
<!-- Прямоугольник --> <rect fill="#ff00ff" x="40" y="40" width="200" height="100" />
<!-- Квадрат --> <rect fill="rgb(255, 0, 255)" x="280" y="40" width="100" height="100" />
<!-- Круг --> <circle fill="hsl(300, 100%, 50%)" cx="470" cy="90" r="50" />
<!-- Овал --> <ellipse fill="rgb(100%, 0%, 100%)" cx="660" cy="90" rx="100" ry="50" />
<!-- Треугольник --> <polygon fill="fuchsia" points="240,280 40,280 140,180 " />
<!-- Линия --> <line stroke="#f0f" stroke-width="10" x1="330" y1="280" x2="330" y2= "180 " />
<!-- Ломаная линия --> <polyline fill="none" stroke="#ff00ffff" stroke-width="10" points="520,275 425,275 515,185 420,185 "/>
<!-- Стрелка --> <polygon fill="magenta" 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: #ff00ff;}
/* Квадрат */ .rectangle {width: 102px; height: 102px; background: #ff00ff;}
/* Круг */ .circle {width: 102px; height: 102px; border-radius: 50%; background: rgb(255, 0, 255);}
/* Овал */ .oval {width: 204px; height: 102px; border-radius: 50%; background: #f0f;}
/* Треугольник */ .triangle {border: solid transparent; border-width: 0 102px 102px; border-color: magenta transparent;}
/* Линия */ .line {width: 10px; height: 102px; margin-left: 71px; background: rgb(255, 0, 255);}
/* Ломаная линия */ .polyline {width: 96px; height: 82px; margin-left: 76px; border-top:10px solid magenta; border-bottom:10px solid hsla(300, 100%, 50%, 1);}
.polyline:before {width: 10px; height: 126px; transform: rotate(45deg); position: absolute; top: -22px; right: 43px; background: hsl(300, 100%, 50%);}
/* Стрелка */ .arrow {width: 120px; height: 20px; background: fuchsia;}
.arrow:before {position: absolute; border: 40px solid transparent; top: -10px; right: -80px;border-left-color: fuchsia; 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>

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 175" >
<!-- Код документа для цвета magenta с использованием внутренних стилей CSS. -->
<style type="text/css">
.str2 {stroke:#666;stroke-width:6}
.f1 {fill:#ff00ff} /* Цвет #f0f без прозрачности */
.f2 {fill:hsla(300, 100%, 50%, 0.8)} /* HSLA, прозрачность: 0.8 */
.f3 {fill:rgba(255, 0, 255, 0.6)} /* RGBA: 0.6 */
.f4 {fill:#ff00ff;fill-opacity:0.4} /* Через свойство "opacity": 0.4 */
.f5 {fill:#ff00ff33} /* #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>

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

Цвета HTML

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

Предыдущий:
#FF00CC
Следующий:
#FF3300