キヌアホワイト

Quinoa White

中南米の伝統色 白系 紀元前5000年頃〜

広色域(Display P3)比較

sRGB(従来のWeb標準)

#FFFDD0

Display P3(広色域)

color(display-p3 0.9987 0.9924 0.8336)

意味と歴史

由来

南米アンデス地方を原産とするヒユ科の植物、キヌアの種子に由来する色名。キヌアは疑似穀物の一種で、その種子はタンパク質、食物繊維、ビタミン、ミネラルが豊富である。

出典(1件)

歴史

キヌアは南米北西部のアンデス地域で生まれた。5,200年から7,000年前に家畜の飼料として初めて利用され、3,000年から4,000年前にはボリビアとペルーのチチカカ湖周辺で人間の食用とされるようになった。

出典(1件)

伝統的な用途

キヌアは主に食用となる種子を目的として栽培される作物である。歴史的には家畜の飼料として利用が始まり、後に人間の食料として消費されるようになった。

出典(1件)

CSSコード

HEX

#FFFDD0

RGB

rgb(255, 253, 208)

CMYK

cmyk(0%, 1%, 18%, 0%)

HSV

hsv(57.4, 18.4%, 100%)

OKLCH

oklch(98.44% 0.058 105.31)

Display P3

color(display-p3 0.9987 0.9924 0.8336)

Munsell

CIE XYZ

XYZ(0.8775, 0.96066, 0.73582)

CIE L*a*b*

Lab(98.46, -6.49, 21.83)

CIE LCH(ab)

LCH(98.46, 22.78, 106.56°)

CIE L*u*v*

Luv(98.46, 3.57, 33.1)

Hunter Lab

Hunter Lab(98.01, -0.66, 1.95)

xyY

xyY(0.340912, 0.373219, 0.96066)

JzAzBz

JzAzBz(0.393203, 0.017097, 0.027772)

JzCzHz

JzCzHz(0.393203, 0.032613, 58.383404°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #FFFDD0;
  background-color: oklch(98.44% 0.058 105.31);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.9987 0.9924 0.8336);
  }
}

コントラストチェッカー

WCAG 2.1 基準に基づくコントラスト比を表示します。

サンプル

白背景

1.04:1

AA Fail AAA Fail
AA大文字 Fail
サンプル

黒背景

20.21:1

AA Pass AAA Pass
AA大文字 Pass
サンプル

白文字

1.04:1

AA Fail AAA Fail
AA大文字 Fail
サンプル

黒文字

20.21:1

AA Pass AAA Pass
AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — The quick brown fox

黒テキスト — The quick brown fox

色の上にテキストを配置した場合の可読性を確認できます。見出し・本文・リンクなど、さまざまなサイズで試してみてください。

テキスト色として使用

白背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

黒背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

UIコンポーネントでの使用例
バッジ

色覚シミュレーション

P型(1型)

赤色の感度が低下

#FFF9CD

D型(2型)

緑色の感度が低下

#FFFCD2

T型(3型)

青色の感度が低下

#FFF7F1

配色提案

この配色はマヤ・アステカの宇宙観に基づく色彩体系と、アンデス織物の伝統的な配色パターンを参照しています。

補色

Complementary

色相環の反対側に位置する色。最も強いコントラストを生む

#FFFDD0
#FFFFFF

類似色

Analogous

色相が近い色の組み合わせ。自然で調和的な印象を与える

#FFFDD0
#FFFFFF
#FFFFFF

トライアド

Triadic

色相環を三等分する配色。活力がありバランスの良い組み合わせ

#FFFDD0
#FFFFFF
#FFFFFF

スプリットコンプリメンタリー

Split-complementary

補色の両隣を使う配色。補色より柔らかいコントラスト

#FFFDD0
#FFFFFF
#FFFFFF

テトラディック(正方形)

Tetradic (Square)

色相環を四等分する配色。豊かな色彩で華やかな印象

#FFFDD0
#FFFFFF
#FFFFFF
#FFFFFF

テトラディック(長方形)

Tetradic (Rectangle)

二対の補色を組み合わせた配色。多彩ながらまとまりのある配色

#FFFDD0
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

同じ色相で明度・彩度を変えた配色。統一感のある上品な印象

#FFFDD0
#F1F0DA
#FFFFFF
#F2F1CD

ダブルコンプリメンタリー

Double Complementary

隣り合う二色とその補色による四色配色。複雑で魅力的な配色

#FFFDD0
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #FFFDD0, #FFFFFF);
#FFFDD0
#FFFDD9
#FFFEE3
#FFFEEC
#FFFFF6
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #FFFDD0, #000000);
#FFFDD0
#CCCAA6
#99987D
#666553
#33332A
#000000

透明へ

background: linear-gradient(to right, #FFFDD0, transparent);

エクスポート

CSS変数
--color-quinoa_white: #FFFDD0;
--color-quinoa_white-rgb: 255, 253, 208;
--color-quinoa_white-oklch: 98.44% 0.058 105.31;
Sass変数
$color-quinoa_white: #FFFDD0;
$color-quinoa_white-rgb: rgb(255, 253, 208);
$color-quinoa_white-oklch: oklch(98.44% 0.058 105.31);
Tailwind Config
'quinoa_white': '#FFFDD0',
SwiftUI
Color(red: 1.000, green: 0.992, blue: 0.816)
JSON
{
  "name": {
    "ja": "キヌアホワイト",
    "en": "Quinoa White"
  },
  "hex": "#FFFDD0",
  "rgb": {
    "r": 255,
    "g": 253,
    "b": 208
  },
  "cmyk": {
    "c": 0,
    "m": 1,
    "y": 18,
    "k": 0
  },
  "oklch": {
    "l": 98.44,
    "c": 0.058,
    "h": 105.31
  },
  "displayP3": {
    "r": 0.9987,
    "g": 0.9924,
    "b": 0.8336
  },
  "hsv": {
    "h": 57.4,
    "s": 18.4,
    "v": 100
  },
  "munsell": ""
}