Color Conversion
#000f08Abyssal Fern
About this color
Grounded quiet authority
Abyssal Fern is an inky near-black green with a whisper of teal that reads almost black until light reveals its forest depth. It evokes hushed, protective calm — the feeling of being safely concealed in a verdant night.
Designer tip: Use #000F08 as the primary background in high-end product photography or dark-mode UI and add a single saturated accent (e.g., #8B003E) for CTAs; use a 16–24px padding around subjects to keep the color from feeling claustrophobic.
Best use case: Luxury product hero backgrounds (jewelry, watches, artisanal spirits) where the deep green-black lets warm metals and jewel tones pop.
Psychology
Psychological traits and emotional associations
Effect
In a space this shade creates an intimate, cocooning atmosphere that reduces visual noise and encourages focus. In branding it signals discreet luxury and expertise without flamboyance.
Emotional impact
A calm, slightly guarded intrigue that invites closer inspection.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western contexts the tone reads as sophisticated and stable (luxury, finance). In parts of the Middle East and Islamic cultures deep greens are traditionally auspicious and tied to paradise imagery. In East Asia a near-black green can be associated with nature, formality, and refined taste rather than the bright-green connotations of youth.
Positive associations
Associated with sanctity and prosperity in Islamic contexts, and with heritage and refinement in Western luxury goods.
Negative associations
Can imply secrecy or mourning in some Western contexts and be read as somber or heavy if overused in casual consumer goods (Western audiences).
Design applications
How this color is used across different fields
E-commerce hero photography
As a near-black backdrop it makes golds, bronzes and colored gemstones appear richer and more luminous, increasing perceived value of luxury products.
Dark-mode UI
Use as the primary canvas for apps focused on finance, wellness, or editorial content to reduce eye strain while conveying seriousness and focus.
Packaging for premium spirits or perfumes
On boxes or bottles it signals age, depth, and heritage — especially when paired with metallic foils or debossing.
Interior accent walls (reading nooks, studies)
Applied to a single wall it creates an enveloping, contemplative space that highlights lighter furniture and brass accents.
Outerwear and tailoring
Works on heavy fabrics like wool coats where the near-black green reads formal yet natural, distinguishing garments from generic black.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Use it as a dominant background and introduce one saturated accent (complementary or triadic) to maintain visual hierarchy.
- + Apply subtle lighter tints (8–12% lighter) for surfaces like cards or panels to create depth without leaving the cocooning palette.
- + Pair with warm metallics (brass, bronze) or off-white type to raise perceived luxury and legibility.
Avoid this
- - Don't pair it with low-contrast dark grays for small text — legibility suffers.
- - Don't use it as the sole color in casual, playful brands where warmth and approachability are needed.
- - Don't oversaturate large expanses in small rooms or tiny UI elements — it can feel claustrophobic.
Fundamentals: Maintain contrast and a single bright accent to define hierarchy while preserving the color's cocooning quality.
Overuse risk: If this shade dominates, designs become visually heavy and can feel secretive or oppressive rather than refined; accents and light zones are necessary to avoid claustrophobia.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
serious
Trend
Color pairing
Colors that complement and enhance this shade
#8B003E
Deep raspberry complement — a complementary harmony that provides warm, high-impact accents for CTAs or foil stamping.
#003F2E
Rich, slightly lighter teal — an analogous harmony that creates layered depth while keeping the palette cohesive.
#5F2B00
Burnt amber triadic accent — a triadic contrast that adds earthy warmth and works beautifully for wooden or leather textures.
Typography hints: For headings on #000F08 use a geometric sans-serif at 600–800 weight (e.g., Montserrat or Futura) in an off-white (warm ivory). For body copy use a humanist serif or sans at 400–500 weight with increased letter-spacing and at least 16px size to meet contrast and readability.
Historical significance
The story and heritage of this color
Dark green-black tones like #000F08 have roots in earth-based pigments: artists historically deepened green earth (terre verte) or copper greens with carbon blacks and umbers to reach near-black values; industrial use expanded in the 18th–19th centuries as darker green dyes and lacquers became available for uniforms and ship paint.
Through the 19th and 20th centuries the shade carried meanings of formality and durability — seen in military dress greens, bookbindings, and Victorian interiors where deep greens suggested taste and restraint; in fashion and Art Nouveau it appeared as a backdrop that emphasized gilded ornament and polished materials.
Today this specific near-black green is re-emerging in luxury branding, product photography, and dark UIs where sustainability, depth, and discreet elegance are desirable; designers use it to create intimate digital experiences and high-contrast physical packaging that feels both modern and rooted in nature.
Variations
The purpose of this section is to accurately produce tints (pure white added) and shades (pure black added) of your selected color in 10% increments.
Pro Tip: Use shades for hover states and shadows, tints for highlights and backgrounds.
Shades
Darker variations created by adding black to your base color.
Tints
Lighter variations created by adding white to your base color.
Common Use Cases
- • UI component states (hover, active, disabled)
- • Creating depth with shadows and highlights
- • Building consistent color systems
Design System Tip
These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Complement
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Split-complementary
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Triadic
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Analogous
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
Monochromatic
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Tetradic
Two sets of complementary colors, separated by 60 degrees of hue.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
WCAG Standards
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.