👩‍💻

VIカラーコード（CSS等）

背景要素などでVIカラーを使いたい場合、以下のコードを用いることができます。社内ツールやLP制作など、是非お気軽に活用してください。

以下の種類がありますので、用途に合わせてご活用ください。

CSS/SCSS
CSS
SCSS
CSS Variables
CSSフレームワーク
Tailwind CSS
その他
JSON
JavaScript Object

💡

注意事項 YUMEMIロゴについては、コードではなくSVGを使用してください。何か確認したいことがあれば #001_help_branding までご連絡ください。

CSS/SCSS

CSS

.yumemi-vi-gradient-yellow{
    background: linear-gradient( 90deg, #ffeb46 0%, #faa500 100%);
}

.yumemi-vi-gradient-orange{
    background: linear-gradient( 90deg, #ffdc5a 0%, #ff5537 100%);
}

.yumemi-vi-gradient-red{
    background: linear-gradient( 90deg, #ffb99b 0%, #f00a14 100%);
}

.yumemi-vi-gradient-pink{
    background: linear-gradient( 90deg, #ffadb7 0%, #dc0f78 100%);
}

.yumemi-vi-gradient-purple{
    background: linear-gradient( 90deg, #eb91c8 0%, #4614b4 100%);
}

.yumemi-vi-gradient-blue-purple{
    background: linear-gradient( 90deg, #78a5f5 0%, #7814a0 100%);
}

.yumemi-vi-gradient-blue{
    background: linear-gradient( 90deg, #78e3fa 0%, #1e28c8 100%);
}

.yumemi-vi-gradient-light-blue{
    background: linear-gradient( 90deg, #64f0d7 0%, #008ce6 100%);
}

.yumemi-vi-gradient-blue-green{
    background: linear-gradient( 90deg, #b4fcbe 0%, #00afb9 100%);
}

.yumemi-vi-gradient-green{
    background: linear-gradient( 90deg, #d7f582 0%, #5fcd5a 100%);
}

.yumemi-vi-gradient-yellow-green{
    background: linear-gradient( 90deg, #f3f75a 0%, #aaeb1e 100%);
}

.yumemi-vi-gradient-light-yellow{
    background: linear-gradient( 90deg, #faf837 0%, #f5c800 100%);
}

SCSS

@mixin yumemi-vi-gradient-yellow {
  background: linear-gradient(90deg, #ffeb46 0%, #faa500 100%);
}

@mixin yumemi-vi-gradient-orange {
  background: linear-gradient(90deg, #ffdc5a 0%, #ff5537 100%);
}

@mixin yumemi-vi-gradient-red {
  background: linear-gradient(90deg, #ffb99b 0%, #f00a14 100%);
}

@mixin yumemi-vi-gradient-pink {
  background: linear-gradient(90deg, #ffadb7 0%, #dc0f78 100%);
}

@mixin yumemi-vi-gradient-purple {
  background: linear-gradient(90deg, #eb91c8 0%, #4614b4 100%);
}

@mixin yumemi-vi-gradient-blue-purple {
  background: linear-gradient(90deg, #78a5f5 0%, #7814a0 100%);
}

@mixin yumemi-vi-gradient-blue {
  background: linear-gradient(90deg, #78e3fa 0%, #1e28c8 100%);
}

@mixin yumemi-vi-gradient-light-blue {
  background: linear-gradient(90deg, #64f0d7 0%, #008ce6 100%);
}

@mixin yumemi-vi-gradient-blue-green {
  background: linear-gradient(90deg, #b4fcbe 0%, #00afb9 100%);
}

@mixin yumemi-vi-gradient-green {
  background: linear-gradient(90deg, #d7f582 0%, #5fcd5a 100%);
}

@mixin yumemi-vi-gradient-yellow-green {
  background: linear-gradient(90deg, #f3f75a 0%, #aaeb1e 100%);
}

@mixin yumemi-vi-gradient-light-yellow {
  background: linear-gradient(90deg, #faf837 0%, #f5c800 100%);
}

CSS Variables

:root {
  --yumemi-vi-yellow-a: #ffeb46;
  --yumemi-vi-yellow-b: #faa500;
  --yumemi-vi-orange-a: #ffeb46;
  --yumemi-vi-orange-b: #ff5537;
  --yumemi-vi-red-a: #ffb99b;
  --yumemi-vi-red-b: #f00a14;
  --yumemi-vi-pink-a: #ffadb7;
  --yumemi-vi-pink-b: #dc0f78;
  --yumemi-vi-purple-a: #eb91c8;
  --yumemi-vi-purple-b: #4614b4;
  --yumemi-vi-blue-purple-a: #78a5f5;
  --yumemi-vi-blue-purple-b: #7814a0;
  --yumemi-vi-blue-a: #78e3fa;
  --yumemi-vi-blue-b: #1e28c8;
  --yumemi-vi-light-blue-a: #64f0d7;
  --yumemi-vi-light-blue-b: #008ce6;
  --yumemi-vi-blue-green-a: #b4fcbe;
  --yumemi-vi-blue-green-b: #00afb9;
  --yumemi-vi-green-a: #d7f582;
  --yumemi-vi-green-b: #5fcd5a;
  --yumemi-vi-yellow-green-a: #f3f75a;
  --yumemi-vi-yellow-green-b: #aaeb1e;
  --yumemi-vi-light-yellow-a: #faf837;
  --yumemi-vi-light-yellow-b: #f5c800;
}

.yumemi-vi-gradient-yellow {
  background: linear-gradient(90deg, var(--yumemi-vi-yellow-a) 0%, var(--yumemi-vi-yellow-b) 100%);
}

.yumemi-vi-gradient-orange {
  background: linear-gradient(90deg, var(--yumemi-vi-orange-a) 0%, var(--yumemi-vi-orange-b) 100%);
}

.yumemi-vi-gradient-red {
  background: linear-gradient(90deg, var(--yumemi-vi-red-a) 0%, var(--yumemi-vi-red-b) 100%);
}

.yumemi-vi-gradient-pink {
  background: linear-gradient(90deg, var(--yumemi-vi-pink-a) 0%, var(--yumemi-vi-pink-b) 100%);
}

.yumemi-vi-gradient-purple {
  background: linear-gradient(90deg, var(--yumemi-vi-purple-a) 0%, var(--yumemi-vi-purple-b) 100%);
}

.yumemi-vi-gradient-blue-purple {
  background: linear-gradient(90deg, var(--yumemi-vi-blue-purple-a) 0%, var(--yumemi-vi-blue-purple-b) 100%);
}

.yumemi-vi-gradient-blue {
  background: linear-gradient(90deg, var(--yumemi-vi-blue-a) 0%, var(--yumemi-vi-blue-b) 100%);
}

.yumemi-vi-gradient-light-blue {
  background: linear-gradient(90deg, var(--yumemi-vi-light-blue-a) 0%, var(--yumemi-vi-light-blue-b) 100%);
}

.yumemi-vi-gradient-blue-green {
  background: linear-gradient(90deg, var(--yumemi-vi-blue-green-a) 0%, var(--yumemi-vi-blue-green-b) 100%);
}

.yumemi-vi-gradient-green {
  background: linear-gradient(90deg, var(--yumemi-vi-green-a) 0%, var(--yumemi-vi-green-b) 100%);
}

.yumemi-vi-gradient-yellow-green {
  background: linear-gradient(90deg, var(--yumemi-vi-yellow-green-a) 0%, var(--yumemi-vi-yellow-green-b) 100%);
}

.yumemi-vi-gradient-light-yellow {
  background: linear-gradient(90deg, var(--yumemi-vi-light-yellow-a) 0%, var(--yumemi-vi-light-yellow-b) 100%);
}

CSSフレームワーク

Tailwind CSS

gradientColorStops: {
      "yumemi-vi": {
        yellow: {
          a: "#ffeb46",
          b: "#faa500",
        },
        orange: {
          a: "#ffeb46",
          b: "#ff5537",
        },
        red: {
          a: "#ffb99b",
          b: "#f00a14",
        },
        pink: {
          a: "#ffadb7",
          b: "#dc0f78",
        },
        purple: {
          a: "#eb91c8",
          b: "#4614b4",
        },
        "blue-purple": {
          a: "#78a5f5",
          b: "#7814a0",
        },
        blue: {
          a: "#78e3fa",
          b: "#1e28c8",
        },
        "light-blue": {
          a: "#64f0d7",
          b: "#008ce6",
        },
        "blue-green": {
          a: "#b4fcbe",
          b: "#00afb9",
        },
        green: {
          a: "#d7f582",
          b: "#5fcd5a",
        },
        "yellow-green": {
          a: "#f3f75a",
          b: "#aaeb1e",
        },
        "light-yellow": {
          a: "#faf837",
          b: "#f5c800",
        },
      },
    },

How to use: bg-gradient-to-r from-yumemi-vi-yellow-a to-yumemi-vi-yellow-b

その他

JSON

{
  "yellow": {
    "a": "#ffeb46",
    "b": "#faa500"
  },
  "orange": {
    "a": "#ffeb46",
    "b": "#ff5537"
  },
  "red": {
    "a": "#ffb99b",
    "b": "#f00a14"
  },
  "pink": {
    "a": "#ffadb7",
    "b": "#dc0f78"
  },
  "purple": {
    "a": "#eb91c8",
    "b": "#4614b4"
  },
  "blue-purple": {
    "a": "#78a5f5",
    "b": "#7814a0"
  },
  "blue": {
    "a": "#78e3fa",
    "b": "#1e28c8"
  },
  "light-blue": {
    "a": "#64f0d7",
    "b": "#008ce6"
  },
  "blue-green": {
    "a": "#b4fcbe",
    "b": "#00afb9"
  },
  "green": {
    "a": "#d7f582",
    "b": "#5fcd5a"
  },
  "yellow-green": {
    "a": "#f3f75a",
    "b": "#aaeb1e"
  },
  "light-yellow": {
    "a": "#faf837",
    "b": "#f5c800"
  }
}

JavaScript Object

const YUMEMI_BRAND_COLOR = {
  yellow: { a: '#ffeb46', b: '#faa500' },
  orange: { a: '#ffeb46', b: '#ff5537' },
  red: { a: '#ffb99b', b: '#f00a14' },
  pink: { a: '#ffadb7', b: '#dc0f78' },
  purple: { a: '#eb91c8', b: '#4614b4' },
  'blue-purple': { a: '#78a5f5', b: '#7814a0' },
  blue: { a: '#78e3fa', b: '#1e28c8' },
  'light-blue': { a: '#64f0d7', b: '#008ce6' },
  'blue-green': { a: '#b4fcbe', b: '#00afb9' },
  green: { a: '#d7f582', b: '#5fcd5a' },
  'yellow-green': { a: '#f3f75a', b: '#aaeb1e' },
  'light-yellow': { a: '#faf837', b: '#f5c800' },
}