官公庁のwebサイトに使うカラー

185 views
法務青 (Houmu-ao) #0072CE
政府緑 (Seifu-midori) #00A960
行政黄 (Gyousei-ki) #FFC000
公共赤 (Koukyou-aka) #E60012
財務紫 (Zaimu-murasaki) #6F3197
地方灰 (Chihou-hai) #666666
#0072CE 法務青 (Houmu-ao)
#00A960 政府緑 (Seifu-midori)
#FFC000 行政黄 (Gyousei-ki)
#E60012 公共赤 (Koukyou-aka)
#6F3197 財務紫 (Zaimu-murasaki)
#666666 地方灰 (Chihou-hai)

官公庁のwebサイトに使うカラー

About This Color Palette

1. Color Name: 法務青 (Houmu-ao)
   Hex Code: 
          
          #0072CE
       
   Palette Description: This deep and bold shade of blue, known as "Houmu-ao" or "Ministry of Justice Blue," exudes a sense of authority and reliability. It is an ideal choice for official government websites, portraying a trustworthy and professional image.

2. Color Name: 政府緑 (Seifu-midori)
   Hex Code: 
          
          #00A960
       
   Palette Description: "Seifu-midori" or "Government Green" is a vibrant and refreshing green color that symbolizes growth, stability, and harmony. It brings a sense of optimism and balance to the website, making it suitable for highlighting key information or accentuating important elements.

3. Color Name: 行政黄 (Gyousei-ki)
   Hex Code: 
          
          #FFC000
       
   Palette Description: "Gyousei-ki" or "Administrative Yellow" is a bright and energetic shade of yellow, radiating positivity and warmth. This color can be used to draw attention to essential details, notifications, or call-to-action buttons on the website, creating a visually appealing and engaging experience.

4. Color Name: 公共赤 (Koukyou-aka)
   Hex Code: 
          
          #E60012
       
   Palette Description: "Koukyou-aka" or "Public Red" is a vibrant and attention-grabbing red color that signifies urgency, importance, and strength. It can be used sparingly to highlight critical alerts, warnings, or emergency information on the website, ensuring that users take notice of essential updates.

5. Color Name: 財務紫 (Zaimu-murasaki)
   Hex Code: 
          
          #6F3197
       
   Palette Description: "Zaimu-murasaki" or "Finance Purple" is a rich and sophisticated shade of purple associated with financial institutions. It conveys a sense of professionalism, wisdom, and authority. This color can be used for headers, titles, or sections related to financial matters on the website, adding an elegant touch.

6. Color Name: 地方灰 (Chihou-hai)
   Hex Code: 
          
          #666666
       
   Palette Description: "Chihou-hai" or "Regional Gray" is a neutral and versatile gray color that can be used as a background or to provide contrast with other vibrant colors. It represents stability, reliability, and impartiality, making it suitable for various sections of the website, such as menus, footers, or secondary text elements.

Note: These color names and descriptions are based on common associations and interpretations in Japanese culture.

Customize Preview Colors

Upgrade to Pro
C
Croma
Dashboard
Analytics
Customers
Settings
John Doe
Admin
Search...

Overview

Welcome back, here's what's happening today.

+12%
$45,231
Total Revenue
+12%
2,345
Active Users
+12%
128
New Orders

Revenue Growth

Brand
Features Pricing About

Build something amazing

Create stunning designs with our AI-powered color palette generator. Perfect for web, mobile, and print.

Fast Performance

Optimized for speed and efficiency.

Secure by Default

Enterprise-grade security built-in.

Easy to Use

Intuitive interface for everyone.

9:41

Good Morning

Here's your daily update

Today

Design Review
10:00 AM
Team Meeting
11:30 AM
Lunch Break
1:00 PM
Project Focus
2:00 PM
Home
Search
Profile
B
BrandName
Sponsored
...
New Collection

Summer
Sale

Get up to 50% off on all items.

1,234 likes
BrandName Don't miss out on our biggest sale of the season! #summersale #fashion

Logo Variations

B
BrandName
B
BrandName

Business Card

B
BrandName

John Doe

Creative Director

john.doe@brandname.com

+1 (555) 123-4567

www.brandname.com

Type Scale

Heading 1

Bold / 48px

Heading 2

Bold / 36px

Heading 3

Bold / 30px

Heading 4

Bold / 24px

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Regular / 16px

Article Layout

Design Trends

The Future of Color

Color trends are evolving rapidly. We are seeing a shift towards more vibrant, expressive palettes that capture attention and evoke emotion.

"Color is a power which directly influences the soul."

Why it matters

Choosing the right color palette is crucial for brand identity. It communicates values without words and creates an instant connection with the audience.

Abstract

Composition #01

Download Files

Copy Code

variables.css

          

Simulate how your palette appears to users with different types of color vision deficiencies. Approximately 8% of men and 0.5% of women have some form of color blindness.

Original Palette

Protanopia

Red-blind (approx. 1% of men)

Deuteranopia

Green-blind (approx. 1% of men)

Tritanopia

Blue-blind (very rare)

Achromatopsia

Total color blindness (monochromacy)

Shades & Tints

Explore lighter variations (tints) and darker variations (shades) of each color. Click any color to copy its hex code.

法務青 (Houmu-ao)

#0072CE

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

政府緑 (Seifu-midori)

#00A960

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

行政黄 (Gyousei-ki)

#FFC000

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

公共赤 (Koukyou-aka)

#E60012

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

財務紫 (Zaimu-murasaki)

#6F3197

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

地方灰 (Chihou-hai)

#666666

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Color Theory Analysis

Unlock advanced color wheel distribution, harmony detection, and HSL color analysis with Pro.

Upgrade to Pro

Color Wheel Distribution

Harmony Analysis

Dominant Temperature

--

Harmony Type

--

Analyzing color relationships...

Color Values (HSL)

Background Color

#

Colors

Text Color

#

Colors

Preview & Analysis

Aa

The quick brown fox jumps over the lazy dog.

Contrast Ratio --

Normal Text

WCAG AA --
WCAG AAA --

Large Text

WCAG AA --
WCAG AAA --
AI

AI Contrast Fix Suggestions

Suggests background & text tweaks to reach WCAG targets.

Log in to unlock 3 free AI tries

Ready to suggest tweaks for AA/AAA.

Suggested pairs

Shortest hop that clears WCAG AA/AAA.

Current: --
Run “Suggest Fixes” to see AI options.

Understanding Contrast Ratios

4.5:1 (Level AA)

The minimum required contrast ratio for normal text to be considered accessible under WCAG 2.1 Level AA. For large text, the requirement is lower at 3.0:1. This is the standard target for most web content.

7.0:1 (Level AAA)

The "gold standard" for accessibility. Achieving a 7.0:1 ratio ensures that your text is readable even for people with significant vision loss. For large text, the AAA requirement is 4.5:1.

What counts as Large Text?

WCAG defines large text as anything 18pt (approx. 24px) or larger, or 14pt (approx. 18.66px) and bold or larger. Most headings fall into this category.

Why it matters

Proper contrast is essential for everyone, but especially for people with color blindness, low vision, or those viewing screens in bright sunlight.

Other Similar Palettes

#0A3C8A
#3FA9F5
#3DDAD7
#D4AF37
#F8F9FA
#000000
#6A0DAD
#FFA500
#FFFFF0
#232B35
#2E1A47
#007BFF
#1A1A6E
#A3C1E0
#F0F0F0
#4B0082
#007BFF
#1A1A6E
#A3C1E0
#F0F0F0
#1A1A6E
#00FFFF
#A3C1E0
#007BFF
#F0F0F0
#1A1A6E
#A3C1E0
#007BFF
#F0F0F0
#001F3F
#800020
#B7410E
#6F4E37
#A8A39D
#8E4585
#F8F8F0

Update Your Palette

Current Palette

法務青 (Houmu-ao)
政府緑 (Seifu-midori)
行政黄 (Gyousei-ki)
公共赤 (Koukyou-aka)
財務紫 (Zaimu-murasaki)
地方灰 (Chihou-hai)

官公庁のwebサイトに使うカラー

Try these examples:

New to HueHive? 🎨

Discover AI-powered color tools