The outline-color CSS property sets the color of an element’s outline.
The super fast color palettes generator!
Create the perfect palette or get inspired by thousands of beautiful color schemes.
iOS App
Create, browse and save palettes on the go.
Android App
Thousands of palettes in your pocket.
Figma Plugin
All palettes right in your workspace.
Chrome Extension
Get and edit a palette every new tab.
Adobe Extension
Use Coolors with your favorite tools.
Used by 5+ million designers and by top companies
- Created with Sketch.
- Created with Sketch.
- Created with Sketch.
- Created with Sketch.
© Coolors by Fabrizio Bianchi. From a creative to all the others.
Sign in with your email here.
By continuing, you agree to our Terms of Service.
Read our Privacy Policy.
Forgot password? Reset
Don’t have an account? Sign up
Diagrams Color Schemes / Palettes
Adobe Illustrator Color Swatch Library for 3D Concept Diagrams, plans, sections and elevations and vector drawings.
Includes 9 color schemes organized as Swatches Color Groups – ready to use in your next concept diagram!
This pack is part of the Concept Diagram Assets Mega Pack
Mega Pack contains:
1. Diagram assets and icons
2. 2D and 3D arrows
3. Text bubbles / speech bubbles / text clouds
4. Diagrams color schemes
5. Legends and numbering icons
6. Icons and pictograms: people, plants, transportation and more
Illustrations by Anais Simaan
File format: AI, Compatible with Adobe Illustrator
Share: Share on twitter
Product License
Free Products
Free products can be used in any type of use – both academic and commercial. When using a set, a pack or part of it, you are required to give full credit to Studio Alternativi (with an active link for online versions) and to the product’s creator.
When a product is used in a project that is published on social media, you are required to give full credit to Studio Alternativi (with an active tag to Studio Alternativi’s profile).
Educational (Academic) Use
When using a product tagged with “Educational Use” you are allowed to use it for academic purposes only. Giving credit to Studio Alternativi is much appreciated.
Commercial Use
Once bought, you are free to use the product without giving attribution.
What is strictly not allowed to do (in all cases)?
Products can’t be sold without being part of a bigger artwork like a drawing, collage, rendering, poster or any other work combining Studio Alternativi’s digital products with other graphic or digital elements.
Also, you are not allowed to use products from Studio Alternativi in similar or any competing services.
Download Instructions
RAR / ZIP Folders
Please use WINRAR – a free software to open the compressed folder.
AI Vector Files
Please use Adobe Illustrator to open the files
ABR (Photoshop Brushes)
1. Open Adobe Photoshop
2. Open the Brushes Panel: Window > Brushes
3. Select Import Brushes
4. Locate the .abr file on your hard drive and click open to install
5. The brushes will appear in your Brushes Panel whenever the Brush Tool is selected
Description
An outline is a line that is drawn around an element, outside the border . Unlike the element’s border, the outline is drawn outside the element’s frame, and may overlap other content. The border, on the other hand, will actually alter the page’s layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).
It is often more convenient to use the shorthand property outline when defining the appearance of an outline.
Accessibility concerns
Custom focus styles commonly involve making adjustments to the outline property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Formal definition
| Initial value | invert , for browsers supporting it, currentColor for the other |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | For the keyword invert , the computed value is invert . For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0) . |
| Animation type | a color |
outline-color =
[ | ] |
invert
=
=
stripes( # )
=
&&
[ | ]?
=
|
