Generate properly formatted citations in APA, MLA, Chicago, and Harvard styles — for books, journal articles, websites, and conference papers. Paste them directly into your bibliography or export as text. Generator Bibliography Source Type Book Journal Article Website Conference Paper Citation Style APA 7th MLA 9th Chicago 17th Harvard <!-- Authors --> <div class="cg-section"> <label style="font-size:12px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.03em;">Author(s)</label> <div id="cg-authors" style="margin-top:6px;"></div> <button class="cg-btn cg-btn-secondary cg-btn-sm" id="cg-add-author" style="margin-top:6px;">+ Add Author</button> </div> <hr class="cg-divider"> <!-- Core fields --> <div class="cg-row"> <div class="cg-field"> <label>Title</label> <input type="text" id="cg-title" placeholder="Work title"> </div> <div class="cg-field"> <label>Year</label> <input type="text" id="cg-year" placeholder="2024" maxlength="4" style="max-width:120px;"> </div> </div> <div class="cg-row"> <div class="cg-field" id="cg-field-publisher"> <label>Publisher</label> <input type="text" id="cg-publisher" placeholder="Publisher name"> </div> <div class="cg-field" id="cg-field-place"> <label>Place of Publication</label> <input type="text" id="cg-place" placeholder="New York"> </div> </div> <div class="cg-row" id="cg-row-journal"> <div class="cg-field"> <label>Journal Name</label> <input type="text" id="cg-journal" placeholder="Nature, Science, ..."> </div> <div class="cg-field" style="max-width:100px;"> <label>Volume</label> <input type="text" id="cg-volume" placeholder="12"> </div> <div class="cg-field" style="max-width:100px;"> <label>Issue</label> <input type="text" id="cg-issue" placeholder="3"> </div> <div class="cg-field" style="max-width:130px;"> <label>Pages</label> <input type="text" id="cg-pages" placeholder="45–67"> </div> </div> <div class="cg-row" id="cg-row-conference"> <div class="cg-field"> <label>Conference Name</label> <input type="text" id="cg-conference" placeholder="Proceedings of ..."> </div> <div class="cg-field"> <label>Conference Location</label> <input type="text" id="cg-conf-location" placeholder="San Francisco, CA"> </div> </div> <div class="cg-row"> <div class="cg-field"> <label>DOI</label> <input type="text" id="cg-doi" placeholder="10.1000/xyz123"> </div> <div class="cg-field" id="cg-field-url"> <label>URL</label> <input type="text" id="cg-url" placeholder="https://example.com"> </div> </div> <div class="cg-row" id="cg-row-access"> <div class="cg-field"> <label>Access Date</label> <input type="text" id="cg-access-date" placeholder="May 16, 2025"> </div> <div class="cg-field"> <label>Website Name</label> <input type="text" id="cg-site-name" placeholder="BBC News"> </div> </div> <hr class="cg-divider"> <!-- Preview --> <h2>Citation Preview</h2> <div class="cg-preview-box"> <div class="cg-preview-label">Reference List</div> <div class="cg-preview-text" id="cg-preview-ref">Fill in the fields above to generate a citation.</div> </div> <div class="cg-intext" id="cg-preview-intext" style="display:none;"> <strong>In-text:</strong> <span id="cg-intext-text"></span> </div> <div class="cg-copy-row"> <button class="cg-btn cg-btn-primary" id="cg-copy-ref">Copy Reference</button> <button class="cg-btn cg-btn-secondary" id="cg-copy-intext">Copy In-text</button> <button class="cg-btn cg-btn-secondary" id="cg-add-to-bib">Add to Bibliography</button> <span class="cg-toast" id="cg-toast"></span> </div> Bibliography Sort A–Z Export as Text Clear All No citations yet. Generate one and click "Add to Bibliography". Related tools: ...

Paste your HTML, CSS, or JavaScript below and click Minify to strip whitespace, comments, and unnecessary characters. Works entirely in your browser — nothing is sent to a server. HTML CSS JavaScript Remove comments Collapse whitespace Remove optional closing tags Remove comments Remove whitespace Remove last semicolons Merge duplicate selectors Remove // comments Remove /* */ comments Collapse whitespace 📂 Upload file No file chosen ⚡ Minify ✨ Beautify 📋 Copy Result Clear Output Related tools: SQL Formatter  |  JSON Formatter ...

Instantly preview how any color or palette appears to people with different types of color vision deficiency. Useful for designers, developers, and accessibility auditors. Color Input + Add Color (max 5) Simulate Reset Simulation Results Colors are approximated using the Vienot/Brettel algorithm. Results are visual estimates, not medical definitions. Accessibility Tips Designing for Color Vision Deficiency Never rely on color alone to convey meaning — use labels, patterns, or icons alongside color. Ensure sufficient contrast between adjacent colors (aim for WCAG AA: 4.5:1 for text). Avoid red-green combinations as the primary distinguishing factor in charts or UI. Use colorblind-friendly palettes (e.g., Okabe-Ito, IBM Carbon, or Colorbrewer) for data visualization. Test your designs with a simulator — tools like this one cover the most common deficiency types. Add texture or pattern fills to charts in addition to color coding. Provide alternative text descriptions for color-coded information. Color Vision Deficiency Statistics Type Description Affected (approx.) DeuteranopiaGreen cone absent (red-green)1% of males ProtanopiaRed cone absent (red-green)1% of males DeuteranomalyGreen cone shifted (most common)5% of males ProtanomalyRed cone shifted1% of males TritanopiaBlue cone absent (blue-yellow)~0.003% (all) TritanomalyBlue cone shifted~0.01% (all) AchromatopsiaNo color vision (total)~0.003% (all) AchromatomalyReduced color visionRare Source: Colour Blind Awareness. Male prevalence is higher for X-linked types (red-green). ~8% of males and ~0.5% of females have some form of color vision deficiency. ...

Enter any foreground and background color to instantly calculate the WCAG 2.1 contrast ratio. See whether your color pair passes AA or AAA compliance for normal text, large text, and UI components. ...

Color Contrast Checker WCAG 2.1 — AA & AAA compliance checker with live preview and color blindness simulation ...

Convert any color between HEX, RGB, HSL, HSV/HSB, CMYK, and CSS named colors instantly. Pick a color, paste a value in any format, and every other format updates live. Generate lighter and darker shades, find the complementary color, and copy any format with one click. ...

Type your text, pick up to 5 color stops, and generate a beautiful color gradient across every character. Preview the result live, then copy the HTML (inline color spans) or the CSS background-clip gradient version. Your Text Hello World! Preview size: 36px <div class="gt-panel" style="margin-top:16px;"> <h3>Color Stops</h3> <div class="gt-stops" id="gt-stops-list"></div> <button class="gt-add-stop" id="gt-add-stop-btn">+ Add Color Stop</button> <div class="gt-options"> <label class="gt-option-row"> <input type="checkbox" id="gt-skip-spaces"> Skip spaces (no color on spaces) </label> <label class="gt-option-row"> <input type="checkbox" id="gt-bold" checked> Bold preview </label> </div> </div> Live Preview <div class="gt-panel" style="margin-top:16px;"> <h3>Output</h3> <div class="gt-tabs"> <button class="gt-tab active" id="gt-tab-html" onclick="gtSwitchTab('html')">HTML (inline spans)</button> <button class="gt-tab" id="gt-tab-css" onclick="gtSwitchTab('css')">CSS gradient</button> </div> <div class="gt-output"> <pre id="gt-output-code"></pre> </div> <div class="gt-btn-row"> <button class="gt-btn gt-btn-primary" onclick="gtCopy()">Copy Output</button> <button class="gt-btn gt-btn-ghost" onclick="gtReset()">Reset</button> </div> </div> Copied! Generate color schemes → Color Scheme Generator ...

Mixed Color #7B6FBD #7B6FBD⎘ rgb(123, 111, 189)⎘ hsl(248, 35%, 59%)⎘ Colors to Mix + Add Another Color (up to 5) Total: 100% Tints & Shades Tints (+ White) Shades (+ Black) Complementary Color #8D7F3B Opposite on the color wheel — great for contrast & accents Use as Color 1 Color History Mix colors to build history... Clear History How to Use the Color Mixer Select colors: Click the color swatch (left of each row) to open the browser’s native color picker, or type a HEX code directly into the input field. Up to 5 colors can be mixed simultaneously. ...

Find the closest CSS named color to any hex, RGB, or HSL value — instantly. Browse all 148 CSS named colors, search by name, and copy values with one click. Find Closest CSS Color Name HEX RGB Picker HEX Color Find Name Enter a 6-digit hex code (e.g. #ff6347) ...

Pick a base color, choose a harmony mode, and instantly get a beautiful 5-color palette. Lock any color to keep it while regenerating the rest. Click any swatch to copy its HEX code. ...