インターナショナル・オレンジ

いんたーなしょなるおれんじ | International Orange

近代・産業色 橙系 1956年

広色域(Display P3)比較

sRGB(従来のWeb標準)

#FF4F00

Display P3(広色域)

color(display-p3 0.9244 0.3636 0.1631)

意味と歴史

由来

航空宇宙産業や海事業界で、物体を周囲から際立たせるために国際的に使用される安全色であることに由来する。このHEX値は特に航空宇宙分野で用いられる色調を指す。

出典(1件)

歴史

1956年制定の米国連邦規格「Federal Standard 595」に由来する色の一つ。航空宇宙分野ではNASAの宇宙服や、音速を初めて破ったBell X-1の塗装に使用された。海事分野では1962年に米国沿岸警備隊が浮力装置の色として採用し、国際的に安全色として認知された。

出典(1件)

伝統的な用途

航空宇宙産業や海事業界で、周囲から物体を際立たせる安全色として用いられる。NASAの宇宙服や東京タワーのような高層建築物の塗装、海上における人命の安全のための国際条約(SOLAS)で定められた救命器具などに使用されている。

出典(1件)

CSSコード

HEX

#FF4F00

RGB

rgb(255, 79, 0)

CMYK

cmyk(0%, 69%, 100%, 0%)

HSV

hsv(18.6, 100%, 100%)

OKLCH

oklch(66.96% 0.222 37.42)

Display P3

color(display-p3 0.9244 0.3636 0.1631)

Munsell

CIE XYZ

XYZ(0.44041, 0.26859, 0.02865)

CIE L*a*b*

Lab(58.84, 64.31, 69.55)

CIE LCH(ab)

LCH(58.84, 94.73, 47.24°)

CIE L*u*v*

Luv(58.84, 144.5, 47.68)

Hunter Lab

Hunter Lab(51.83, 64.76, 31.41)

xyY

xyY(0.59705, 0.36411, 0.26859)

JzAzBz

JzAzBz(0.142875, 0.092511, 0.114642)

JzCzHz

JzCzHz(0.142875, 0.147313, 51.1°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #FF4F00;
  background-color: oklch(66.96% 0.222 37.42);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.9244 0.3636 0.1631);
  }
}

コントラストチェッカー

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

サンプル

白背景

3.30:1

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

黒背景

6.37:1

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

白文字

3.30:1

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

黒文字

6.37:1

AA Pass AAA Fail
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型)

赤色の感度が低下

#857400

D型(2型)

緑色の感度が低下

#B09C00

T型(3型)

青色の感度が低下

#FF0045

配色提案

この配色は現代のデザインシステムにおける色彩理論と、ユニバーサルデザインのアクセシビリティ原則に基づいています。

補色

Complementary

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

#FF4F00
#FFFFFF

類似色

Analogous

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

#FF4F00
#FFFFFF
#FFFFFF

トライアド

Triadic

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

#FF4F00
#FFFFFF
#FFFFFF

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

Split-complementary

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

#FF4F00
#FFFFFF
#FFFFFF

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

Tetradic (Square)

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

#FF4F00
#FFFFFF
#FFFFFF
#FFFFFF

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

Tetradic (Rectangle)

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

#FF4F00
#FFFFFF
#FFFFFF
#FFFFFF

モノクロマティック

Monochromatic

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

#FF4F00
#FFD5B9
#FFFFFF
#FFC195

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

Double Complementary

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

#FF4F00
#FFFFFF
#FFFFFF
#FFFFFF

グラデーション

ティント(明るく)

background: linear-gradient(to right, #FF4F00, #FFFFFF);
#FF4F00
#FF7233
#FF9566
#FFB999
#FFDCCC
#FFFFFF

シェード(暗く)

background: linear-gradient(to right, #FF4F00, #000000);
#FF4F00
#CC3F00
#992F00
#662000
#331000
#000000

透明へ

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

エクスポート

CSS変数
--color-international_orange: #FF4F00;
--color-international_orange-rgb: 255, 79, 0;
--color-international_orange-oklch: 66.96% 0.222 37.42;
Sass変数
$color-international_orange: #FF4F00;
$color-international_orange-rgb: rgb(255, 79, 0);
$color-international_orange-oklch: oklch(66.96% 0.222 37.42);
Tailwind Config
'international_orange': '#FF4F00',
SwiftUI
Color(red: 1.000, green: 0.310, blue: 0.000)
JSON
{
  "name": {
    "ja": "インターナショナル・オレンジ",
    "en": "International Orange",
    "reading": "いんたーなしょなるおれんじ"
  },
  "hex": "#FF4F00",
  "rgb": {
    "r": 255,
    "g": 79,
    "b": 0
  },
  "cmyk": {
    "c": 0,
    "m": 69,
    "y": 100,
    "k": 0
  },
  "oklch": {
    "l": 66.96,
    "c": 0.222,
    "h": 37.42
  },
  "displayP3": {
    "r": 0.9244,
    "g": 0.3636,
    "b": 0.1631
  },
  "hsv": {
    "h": 18.6,
    "s": 100,
    "v": 100
  },
  "munsell": ""
}